/**
 * Custom Global Styles
 * Migrated from Custom CSS & JS plugin
 * Last updated: 2026-05-17
 */

/* =========================================================
   Self-hosted Instrument Sans — latin subset
   Variable font (weights 400-700), roman and italic

   Self-hosted rather than loaded from the Google Fonts CDN, which is how
   Instrument Sans was served before it and is deliberate. The CDN route
   costs two extra cross-origin handshakes (fonts.googleapis.com then
   fonts.gstatic.com) in front of a render-blocking stylesheet, and the H1 is
   the LCP element on the rebuilt templates. It also cannot be preloaded
   usefully, because the woff2 URL is only discovered after that stylesheet
   parses. Serving the file from this origin keeps the single preload at
   wp_head priority 1 (see inc/enqueue.php) and keeps user IPs off a third
   party, which matters for the European traffic the site targets.

   Two faces because Instrument Sans ships a real italic. Loading only the
   roman would leave every <em> synthetically slanted by the browser.
   ========================================================= */
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans/instrument-sans-variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans/instrument-sans-variable-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Instrument Sans Fallback — metric-adjusted Arial
   Stretches Arial's dimensions to match Instrument Sans, so the swap when
   the real file arrives does not reflow the page.

   MEASURED, not copied. The values that used to sit here (104% / 30% / 100%)
   were tuned to Plus Jakarta Sans and would reintroduce exactly the layout
   shift this face exists to prevent.

   Raw metrics, measured on a canvas at 1000px:
     Instrument Sans   ascent 970, descent 250
     Arial             ascent 905, descent 212

   The two overrides are the raw ratios divided by size-adjust, because they
   resolve against the already-adjusted em rather than the raw one. Getting
   that wrong is the usual way these tables end up close but still shifting:
     ascent-override  = (970 / 1000) / 1.023 = 94.8%
     descent-override = (250 / 1000) / 1.023 = 24.4%

   size-adjust was then solved by sweeping candidates against the real face in
   a browser rather than derived from one string's advance width, which is a
   noisier estimate. Rendering "Shopify Conversion Rate Hxpqgy" at 100px:

     plain Arial (no overrides)   width -2.26%   line box -5.92%
     these values                 width -0.01%   line box  0.00%
   ========================================================= */
@font-face {
    font-family: 'Instrument Sans Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
    ascent-override: 94.8%;
    descent-override: 24.4%;
    line-gap-override: 0%;
    size-adjust: 102.3%;
}

/* =========================================================
   Bootstrap font variables, repointed

   bootstrap.min.css ships its own type stack and is still enqueued on every
   page that has not been migrated off it yet. Left alone it sets
   --bs-font-sans-serif to the system stack (system-ui, Segoe UI, Roboto,
   Helvetica Neue, Arial...) and --bs-font-monospace to SFMono/Menlo/Consolas,
   which is how a second and third typeface were still reaching legacy pages
   through .btn, .form-control, .accordion, code and every other Bootstrap
   component that reads them.

   Overridden here rather than in design-tokens.css because that file is
   enqueued BEFORE bootstrap and would simply be overwritten by it. This file
   loads after, so these win. Both are pointed at the one family; a page that
   drops Bootstrap entirely loses nothing.

   NOTE for the owner: --bs-font-monospace also drives <code>, <kbd>, <pre>
   and <samp>. Those now render proportionally, which is correct per "only
   Instrument Sans" but does make a code sample in a blog post harder to read,
   since characters no longer align in columns. Say the word and monospace can
   be given back to those four tags alone.
   ========================================================= */
:root {
    --bs-font-sans-serif: var(--font-body);
    --bs-body-font-family: var(--font-body);
    --bs-font-monospace: var(--font-body);
}

/* WordPress emoji fix (replaces disabled wp-emoji-styles) */
img.emoji {
    display: inline !important;
    width: 1em !important;
    height: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    border: none !important;
    box-shadow: none !important;
}

.story-section-main-wrap .story-img-wrap::before,
.story-img-wrap img {
    border-radius: 10px;
}

.mw-social-icons {
    display: flex;
    gap: 12px
}

.mw-social-icons a,
.mw-social-icons button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--brand-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff0;
    color: var(--brand-500);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none
}

.mw-social-icons a:hover,
.mw-social-icons button:hover {
    background: var(--brand-500);
    color: #fff;
    border-color: var(--brand-500)
}

.mw-social-icons a:hover .mw-social-svg {
    fill: #fff
}

.mw-social-icons button:hover .mw-social-svg {
    fill: #fff
}

.mw-social-svg {
    fill: var(--brand-500)
}

.mw-copy-btn.copied {
    transform: scale(1.1)
}

.mw-copy-btn {
    border: 1px solid var(--brand-500);
    background: #fff0;
    cursor: pointer
}

.mw-icon-wrap {
    display: flex
}

.cst-avtar:hover a,
.cst-avtar a:hover {
    color: #fff !important
}

.cst-cat {
    display: flex;
}

.story-img-wrap img {
    box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.1);
}

.bot-border-remove li {
    border-bottom: 0 !important;
}

.left-container .owl-carousel .owl-nav button.owl-next,
.left-container .owl-carousel .owl-nav button.owl-prev,
.where-we-do-main .owl-nav button,
#client-testimonials-new .owl-nav button {
    border-radius: 100px !important;
}

.tellus-aboutyou-iner {
    background-image: url(../images/footer-bg-about.webp) !important;
}

.employees-reviewscard-front img {
    border-radius: 20px;
}

#blog-pagination .page-numbers {
    display: inline-block;
    margin: 0 4px;
    text-align: center;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.fsp {
    max-width: 900px;
    margin: 0 auto;
}

/* Reset default Bootstrap icon */
.hire-faq .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath d='M8.76952 9.99775C9.08386 9.99775 9.39815 9.87773 9.63781 9.6382L17.1792 2.09672C17.6589 1.61699 17.6589 0.83919 17.1792 0.359653C16.6997 -0.119884 15.922 -0.119884 15.4422 0.359653L8.76952 7.03277L2.09676 0.359887C1.61702 -0.11965 0.839457 -0.11965 0.359957 0.359888C-0.120006 0.839425 -0.120006 1.61723 0.359957 2.09696L7.90124 9.63843C8.14101 9.87801 8.4553 9.99775 8.76952 9.99775Z' fill='%23757575'/%3E%3C/svg%3E");
    background-size: 18px 10px;
    transform: none;
}

/* Opened state icon */
.hire-faq .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath d='M8.76954 0.000294498C9.08387 0.000294471 9.39817 0.120314 9.63782 0.35985L17.1792 7.90132C17.659 8.38105 17.659 9.15886 17.1792 9.63839C16.6997 10.1179 15.922 10.1179 15.4423 9.63839L8.76954 2.96528L2.09677 9.63816C1.61704 10.1177 0.839475 10.1177 0.359975 9.63816C-0.119989 9.15863 -0.119989 8.38082 0.359975 7.90109L7.90125 0.359617C8.14102 0.120042 8.45532 0.000294526 8.76954 0.000294498Z' fill='%23EF6224'/%3E%3C/svg%3E");
}

#our-work-sld-new .owl-prev {
    left: -112px;
}

.customers-logo-list ul li img {
    aspect-ratio: 2 / 1;
    width: 100%;
    object-fit: contain;
}

.mobile-block {
    display: none;
}

.whats-began-wrap p {
    color: #000;
}

.join-our-team-card-cover p {
    max-width: 945px;
    margin: 10px auto 12px;
}

.aboutus-main-wrap .delivering-top-main-text p {
    max-width: 750px;
    margin: 18px auto 20px;
}

.aboutus-main-wrap {
    background: url(../svg/about-bg-banner.svg) bottom center no-repeat !important;
    background-size: cover !important;
    height: 670px;
}

.enstacked-main-section {
    background-position: center;
}

.page-template-about-template .our-blog-container {
    background: #fff;
}

.accolades-section-iner-box {
    box-shadow: 0px 30px 40px 0px #FCE4D880;
}

.great-people-box:last-child .great-people-img::before {
    border: 1px solid #000;
}

.story-section-main-wrap .story-img-wrap:hover:before {
    left: 30px;
    bottom: 30px;
    transition: all 0.3s ease-in;
}

.story-section-main-wrap .story-img-wrap::before {
    transition: all 0.3s ease-in;
}

.career-main-section {
    height: 685px;
    background: #fdeee8;
}

.join-our-team-card-cover ul li img {
    width: 65px;
    height: 65px;
}

.second-make-working ul li {
    filter: none;
    background: transparent;
}

.what-working-left {
    top: 100px;
    width: 41%;
}

.what-working-right {
    width: 59%;
}

.second-hover {
    position: relative;
    padding-right: 30px;
    padding-bottom: 30px;
}

.second-hover img {
    box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.second-hover:before {
    content: "";
    background-color: #fde7de;
    width: 94%;
    height: 90%;
    position: absolute;
    bottom: 0;
    left: 30px;
    border-radius: 10px;
    z-index: -1;
    transition: all 0.3s ease-in;
}

.second-hover:hover:before {
    left: 0px;
    bottom: 30px;
    transition: all 0.3s ease-in;
}

#employees-reviews {
    padding-top: 0;
}

.employees-reviews .com-title-disc-cover {
    padding-right: 180px;
    margin-bottom: 10px;
}

.employees-reviews .owl-nav {
    right: max(10px, calc((100vw - 1110px) / 2));
    top: -80px;
}

.webuild-main-video svg {
    display: none;
}

.page-template-industries-template .our-client-say-main {
    background: #fff;
}

.left-container .owl-carousel .owl-nav button.owl-next,
.left-container .owl-carousel .owl-nav button.owl-prev,
.where-we-do-main .owl-nav button,
#client-testimonials-new .owl-nav button {
    border: 1px solid #DBDBDB !important;
}

.left-container .owl-carousel .owl-nav button.owl-next:hover,
.left-container .owl-carousel .owl-nav button.owl-prev:hover,
.where-we-do-main .owl-nav button:hover,
#client-testimonials-new .owl-nav button:hover {
    border: 1px solid #FACEBB !important;
}

.asterisk {
    color: #fff;
}

/* .com-new-btn-white border overrides removed to allow style.css base styles to apply */

.takea-lookat-main .accordion .accordion-item .accordion-collapse .accordion-body p {
    line-height: 130%;
}

.mt-20 {
    margin-top: 30px;
}

.what-we-offer-boxiner {
    padding: 40px 40px 80px;
}

.com-new-btn:hover {
    border-color: #0000;
}

.com-new-btn-orange:hover path:nth-child(1) {
    animation: arrowPulse1 0.8s infinite;
}

.com-new-btn-orange:hover path:nth-child(2) {
    animation: arrowPulse2 0.8s infinite;
}

.com-new-btn-orange:hover path:nth-child(3) {
    animation: arrowPulse3 0.8s infinite;
}

.com-new-btn-orange:hover {
    color: var(--brand-500);
    background: #000;
    border-color: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.augmentation-advantage-cover ul li:hover img {
    transform: scale(1.05);
}

.augmentation-advantage-cover ul li img {
    transition: all 0.4s ease;
}

.augmentation-advantage-cover ul li {
    transition: all 0.4s ease;
}

.takea-lookat-main .accordion-header .accordion-button::after {
    background-size: 20px 20px;
}

.augmentation-advantage-cover ul li:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(0px);
    background-color: #ffffff;
}

.page-template-hiring-dedicated-developers-template .where-we-do-main {
    margin-bottom: 80px;
}

.takea-lookat-main .accordion .accordion-item .accordion-collapse .accordion-body {
    padding-left: 24px;
}

.heromain-solut-text-left h1 {
    line-height: 130%;
}

.heromain-solut-form-right {
    width: 100%;
}

.radiobtn-form .form-check label {
    color: var(--description-text-color);
    white-space: nowrap;
}

.heromain-solut-text-left h4 {
    letter-spacing: 1.5px;
}

.radiobtn-form .form-check {
    padding: 11px 20px;
}

.advantage-main-cover-right .features-section-iner:hover,
.what-we-offer-boxiner:hover {
    background: var(--brand-50);
    transform: translateY(-1px);
    transition: all 0.3s ease-in;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border-color: #FACEBB;
}

.advantage-main-cover-right .features-section-iner:hover img {
    background-color: #FFB18F;
    transition: all 0.3s ease-in;
}

.advantage-main-cover-right .features-section-iner,
.what-we-offer-boxiner {
    transition: all 0.3s ease-in;
}

.flexible-pricing-plan-card:hover {
    box-shadow: none;
    transition: all 0.3s ease-in;
}

.flexible-pricing-plan-card {
    transition: all 0.3s ease-in;
}

.heromain-solut-text-left ul li {
    font-weight: 500;
    text-align: left;
}

.our-work-sld-main .com-title-disc-cover h2 {
    text-align: center;
}

.web-none {
    display: none;
}

.pb-100 {
    padding-bottom: 120px;
}

.wwo-right-bmargin {
    margin-bottom: 50px;
}

.our-service-new-main-iner {
    gap: 24px;
}

.advantage-main-cover-left .com-title-disc-cover {
    position: sticky;
    top: 100px;
}

.tellus-aboutyou-cover-right a {
    white-space: nowrap;
}

/* Footer CTA button: let it shrink on a narrow phone.
   The nowrap above is right on a desktop row, but it makes the button
   unshrinkable, so its label sets a floor on its width and a long label
   pushes the whole footer past the viewport. Measured at 320px, "Book Your
   Free Shopify CRO Audit" held the button at 314px inside a 291px container
   and took the document to 356px. Body has overflow-x: hidden, so nothing
   scrolled sideways and the end of the button was simply cut off.

   Label length is page-driven, so this is not one page's bug: the same
   footer measured 257px on the Shopify pages, 282px on UX/UI and 314px on
   CRO. This stops the button setting a floor at all rather than shortening
   any one label.

   It lives here rather than in responsive.css because the nowrap it has to
   beat is declared directly above with the same selector, and custom-global
   is enqueued after responsive, so an identical selector over there loses on
   order and the label truncates instead of wrapping.

   Phone only. Above this width the row has the room it was designed for and
   the single-line button is untouched. */
@media (max-width: 575px) {
    .tellus-aboutyou-cover-right,
    .tellus-aboutyou-cover-right a {
        max-width: 100%;
    }

    .tellus-aboutyou-cover-right a {
        white-space: normal;
        text-align: center;
    }
}

html body h1.banner-title {
    line-height: 130%;
}

.hiring-dedicated-dev-new {
    background-size: cover;
}

.modal-content {
    margin-top: 100px;
}

.modal-header .btn-close {
    position: absolute;
    right: 20px;
    top: 20px;
}

.contact-form-wrap .attectfile-cov {
    flex-direction: column;
    align-items: start !important;
    gap: 0 !important;
}

.main-new-home-hero-iner ul li:hover {
    border-color: var(--brand-500);
}

.our-expertise-main-cover .marquee-content ul li:hover {
    transform: scale(1.05);
    transition: all 0.3s ease-in;
}

.our-expertise-main-cover .marquee-content ul li {
    transition: all 0.3s ease-in;
}

.our-client-say-main h2 {
    text-align: left !important;
}

.tech-stack-main ul li .img-round img {
    height: 32px;
    width: 32px;
    position: static;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.tech-stack-main ul li .img-round span {
    display: flex;
    height: 80px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    width: 80px;
}

.service-item-center img {
    margin-bottom: 0;
}

.tech-stack-main ul li .img-round {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.tech-stack-main ul li h3 {
    margin-top: 0;
}

.whyus-ecommerce-cover ul li:hover {
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in;
    background-color: var(--brand-500)12;
}

.whyus-ecommerce-cover ul li {
    transition: all 0.3s ease-in;
}

/* React vs Vue (comparison block) */
.react-vue {
    margin: 0;
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
}

.react-vue table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    background-color: #fff;
}

.react-vue th {
    color: var(--brand-500);
}

.react-vue th,
.react-vue td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

.react-vue table tbody>tr:nth-child(odd)>td,
.react-vue table tbody>tr:nth-child(odd)>th {
    background-color: hsla(0, 0%, 50.2%, .0705882353);
}

.react-vue tr td:first-child {
    width: 160px;
}

/* Keep OUTER circle icons steady (counter-rotate) */
.main-semi-circle .icon-size {
    animation: counterOuter 8s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
}

/* Keep INNER circle icons steady (counter-rotate) */
.main-semi-circle-inner .icon-size {
    animation: counterInner 8s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
}

/* Opposite of rotateOuter (10deg -> -10deg) */
@keyframes counterOuter {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Opposite of rotateInner (-10deg -> +10deg) */
@keyframes counterInner {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.fullstack-sec {
    /* Hero ground: plain white, per the owner's ruling on every hero. */
    background: var(--bg-surface);
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: end;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.inner-content {
    padding-bottom: 100px;
    position: relative;
    z-index: 5;
}

.main-semi-circle .icon-2 {
    position: relative;
    top: -7.5%;
}

/* OUTER CIRCLE */
.main-semi-circle {
    border: 1px solid #FFDCCC;
    position: absolute;
    bottom: -75%;
    left: 50%;
    border-radius: 50%;
    height: 1240px;
    width: 1240px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: rotateOuter 8s ease-in-out infinite;
}

/* INNER CIRCLE */
.main-semi-circle-inner {
    border: 1px solid #FFDCCC;
    position: absolute;
    bottom: -60%;
    left: 50%;
    border-radius: 50%;
    height: 1040px;
    width: 1040px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: rotateInner 8s ease-in-out infinite;
}

/* ICON WRAPPERS */
.lara-vue,
.rect-py,
.ang-next {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.lara-vue {
    width: 103%;
    left: -2%;
    top: -15%;
}

.rect-py {
    width: 60%;
    left: 20%;
    top: -39%;
}

.ang-next {
    width: 88%;
    top: 20%;
}

/* ICON STYLE */
.icon-size {
    background-color: #fff;
    border: 1px solid #E4E2E1;
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
}

.icon-size img {
    height: 36px;
    object-fit: contain;
}

/* ANIMATIONS */
@keyframes rotateOuter {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    50% {
        transform: translateX(-50%) rotate(10deg);
    }

    100% {
        transform: translateX(-50%) rotate(0deg);
    }
}

@keyframes rotateInner {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    50% {
        transform: translateX(-50%) rotate(-10deg);
    }

    100% {
        transform: translateX(-50%) rotate(0deg);
    }
}

.policy-page {
    /* Hero ground: plain white, per the owner's ruling on every hero. */
    background: var(--bg-surface);
}

.policy-page-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 170px 10px 70px 10px;
}

.policy-content-wrap ul li {
    font-size: 16px !important;
    line-height: 20px;
    color: var(--text-color);
}

.policy-page-main .delivering-top-main-text p span {
    font-weight: 400;
}

.policy-main-section .container {
    border: 1px solid #eee;
}

.policy-dates {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.8;
}

.policy-content-wrap {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.policy-content-wrap h5 {
    margin-top: 28px;
}

.policy-content-wrap p {
    margin-bottom: 14px;
}

.policy-content-wrap ul,
.policy-content-wrap ol {
    margin-bottom: 14px;
}

@media (min-width: 1400px) {
    .employees-reviews .left-container {
        padding-left: calc((100% - 1115px) / 2);
    }

    .page-template-hiring-dedicated-developers-template .where-we-do-main {
        margin-bottom: 60px;
    }
}

@media (max-width: 1024px) {
    .where-we-do-main {
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .page-template-hiring-dedicated-developers-template .where-we-do-main {
        margin-bottom: 40px;
    }

    .aboutus-main-wrap .delivering-top-main-text p {
        max-width: 100%;
    }

    .customers-logo-list ul {
        flex-wrap: wrap;
        justify-content: start;
    }

    .customers-logo-list ul li {
        width: 22%;
        padding: 15px;
    }

    .join-our-team-card-cover p {
        max-width: 100%;
        margin: 10px auto 12px;
    }

    .customers-logo-list {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .fsp {
        max-width: 600px;
    }

    .fsp h1 {
        font-size: 30px !important;
        line-height: 40px !important;
    }

    .delivering-top-inner-icon-container .delivering-top-icon:nth-child(1) {
        bottom: 0%;
    }

    .delivering-top-inner-icon-container .delivering-top-icon:nth-child(2) {
        top: 71%;
        right: 28%;
    }

    .delivering-top-icon-container .delivering-top-icon:nth-child(3) {
        bottom: 33%;
        right: 7%;
    }

    .delivering-top-inner-icon-container .delivering-top-icon:nth-child(4) {
        bottom: 29%;
        left: 28%;
    }

    .delivering-top-icon-container .delivering-top-icon:nth-child(1) {
        top: 66%;
    }

    .delivering-top-icon-container .delivering-top-icon:nth-child(2) {
        top: 54%;
        right: 50%;
    }

    .delivering-top-inner-icon-container .delivering-top-icon:nth-child(3) {
        bottom: 7%;
        right: 3%;
    }
}

@media (max-width: 991px) {
    #our-work-sld-new .owl-prev {
        left: 0px;
    }

    .policy-main-section .container {
        width: 90%;
        padding: 16px !important;
    }

    .policy-content-wrap h2 {
        margin-top: 10px !important;
    }

    .left-container {
        overflow: hidden;
        padding-bottom: 30px;
    }

    .employees-reviews .owl-nav {
        margin-top: 25px;
    }

    .employees-reviews .com-title-disc-cover {
        padding-right: 0;
    }

    .employees-reviews .owl-nav {
        top: -60px;
    }

    #employees-reviews {
        padding-left: 25px;
    }

    .join-our-team-card-cover p br {
        display: none;
    }

    .join-our-team-card-cover {
        background-size: cover;
    }

    .page-template-hiring-dedicated-developers-template .what-you-get-main .com-title-disc-cover {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .fsp {
        padding-top: 70px;
    }

    .page-template-hiring-dedicated-developers-template .where-we-do-main {
        margin-bottom: 30px;
    }

    .fsh.delivering-top-main-cover:before {
        background-image: linear-gradient(180deg, white, #FFEDE4) !important;
        height: 30%;
    }

    .what-working-left {
        width: 100%;
    }

    .what-working-right {
        width: 100%;
    }

    .page-template-hiring-dedicated-developers-template .where-we-do-main {
        padding-bottom: 30px;
    }

    .hiring-dedicated-dev-hero-left .banner-title {
        font-size: 30px;
        line-height: 40px;
    }

    .radiobtn-form .form-check input {
        background: #F8F5EE;
    }
}

@media (max-width: 767px) {
    .what-working-left {
        position: relative !important;
        top: 0 !important;
    }

    .advantage-main-cover-right {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
    }

    .our-client-say-main h2 {
        text-align: center !important;
    }

    .our-culture-imgbox img {
        height: 185px;
    }

    .contact-form-wrap .attectfile-cov {
        gap: 0;
    }

    .wwo-right-bmargin {
        margin-bottom: 0px;
    }

    .flexible-pricing-plan-card {
        padding: 20px;
        width: 98%;
    }

    .flexible-pricing-plan-cover {
        justify-content: center;
    }

    .most-popular-plan hr {
        border-top: 1px solid var(--brand-500);
        opacity: 1;
    }

    .what-we-offer-boxiner {
        padding: 24px 24px 75px 24px;
    }

    .radiobtn-form .form-check:nth-child(3) {
        margin-bottom: 20px;
    }

    .web-none {
        display: block;
    }

    .m-none,
    .m-none img {
        display: none !important;
    }

    .why-react-main-cover .confidentiality-common-sect-cover .fullview-respo-show img {
        height: 280px;
        object-fit: contain;
        width: 100%;
        margin-top: 10px;
    }

    .radiobtn-form .form-check .form-check-input:before {
        content: '';
        position: absolute;
        height: 14px;
        width: 14px;
        opacity: 0;
        background-color: var(--brand-500);
        border-radius: 100px;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
    }

    .radiobtn-form .form-check .form-check-input {
        position: relative;
    }

    .radiobtn-form .form-check .form-check-input:checked {
        background-color: #fff;
    }

    .radiobtn-form .form-check .form-check-input:checked:before {
        opacity: 1;
    }

    .heromain-solut-form-btn {
        margin-top: 0;
    }

    .hiring-dedicated-dev-new {
        padding-top: 100px;
        background-size: 100% 75%;
    }

    .hiring-dedicated-dev-new .heromain-solut-form-right {
        box-shadow: 0 4px 10.1px 0 #FB88010A;
    }

    .wwa-box-two:nth-of-type(1) h3 span::after {
        background-color: #facebb;
    }

    .wwa-box-one:nth-of-type(2) h3 span::after {
        background-color: #F8F5EE;
    }

    .join-our-team-card-cover ul li img {
        width: 45px;
        height: 45px;
    }

    .great-people-text .com-new-btn {
        padding: 8px 15px;
    }

    .full-width-btn {
        margin-top: 20px;
    }

    .join-our-team-card-cover .com-title-disc-cover {
        margin-bottom: 30px;
    }

    .join-our-team-card-cover {
        padding: 50px 15px !important;
    }

    .team-sec {
        align-items: center;
    }

    .aboutus-main-wrap .delivering-top-main-text h1 {
        line-height: 40px;
    }

    .aboutus-main-wrap {
        background: url(../images/about-mobile-bg.webp) bottom center no-repeat !important;
        background-size: cover !important;
        height: 500px;
    }

    .takea-lookat-main .accordion-header .accordion-button::after {
        right: 15px;
    }

    .where-we-do-main .owl-carousel {
        margin-top: 0 !important;
    }

    .ecommerce-excellence-left h2,
    .customers-logo-list h2 {
        font-size: 24px !important;
    }

    .customers-logo-list h2 {
        text-align: center;
    }

    .com-new-btn,
    .com-new-btn-white {
        padding: 12px 10px;
    }

    .customers-logo-list ul {
        justify-content: center;
        gap: 15px;
    }

    .takea-lookat-main .accordion .accordion-item .accordion-header .accordion-button {
        padding: 18px 84px 18px 16px;
    }

    .takea-lookat-main .accordion-header .accordion-button::after {
        top: 12px;
    }

    .takea-lookat-main .accordion .accordion-item {
        padding: 0;
    }

    .takea-lookat-main .accordion .accordion-item .accordion-collapse .accordion-body p {
        font-size: 14px;
        padding-bottom: 16px;
        margin-top: -12px;
    }

    .customer-bg-set {
        background-size: cover;
        background-position: bottom right;
    }

    .customers-logo-list ul li {
        width: 46% !important;
    }

    .empowering-industries-main-right {
        display: grid;
        grid-template-columns: 1fr;
    }

    .empowering-industries-marquee {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
    }

    .empowering-industries-card {
        font-size: 14px;
        width: 130px !important;
        height: 130px !important;
    }

    .empowering-industries-marquee-container {
        height: 130px;
        width: 100%;
    }

    .empowering-industries-main-cover {
        padding-bottom: 75px;
    }

    .empowering-industries-card img {
        width: 50px;
        height: 50px;
    }

    .empowering-industries-marquee {
        animation: scrollRight 8s linear infinite;
    }

    @keyframes scrollDown {
        0% {
            transform: translateX(-50%);
        }

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

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

        100% {
            transform: translateX(-50%);
        }
    }

    .mobile-block {
        display: block;
        margin-top: 16px;
    }

    .blog .delivering-top-main-text h1 {
        margin-top: 0 !important;
    }

    .our-blog-main .com-title-disc-cover,
    .our-client-say-main .com-title-disc-cover {
        text-align: center;
    }

    .customers-logo-list ul li:hover::before {
        width: 130px;
    }

    .our-client-say-text h3 {
        font-size: 18px;
        line-height: 120%;
    }

    .our-client-say-user h5 {
        margin-bottom: 0;
    }

    .customers-logo-list h3 {
        line-height: 130%;
    }

    .customers-logo-list {
        padding-top: 20px;
    }

    .radiobtn-form .form-check {
        padding: 0;
    }

    .hiring-dedicated-dev-hero-right {
        padding: 30px 16px;
    }
}

@media (max-width: 479px) {
    .delivering-top-main-text h3 {
        font-size: 24px;
    }

    .hiring-dedicated-dev-hero-left ul li a svg,
    .hiring-dedicated-dev-hero-left ul li a img {
        width: 24px;
    }

    .our-client-say-main .owl-nav {
        bottom: -55px !important;
    }
}

.owl-carousel .owl-item img {
    height: auto;
}

.quote-img::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    background-image: url("../../../../uploads/2026/05/quote.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.1;
    pointer-events: none;
}

.quote-img>* {
    position: relative;
    z-index: 1;
}

.py-0 {
    margin-top: 0;
}

.approach-confidentiality-main .com-title-disc-cover h2 {
    font-size: 30px;
    line-height: 36px;
}

.page-template-about-template .our-client-say-main,
.page-template-about-template .home-customers-logo {
    background: #fff;
}

.blog-links a {
    color: var(--brand-500);
}

.blog-links a:hover {
    color: var(--text-color);
}

/* how we work */
.transf-Experie-cover h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 0 8px;
}

/* Careers page */
.left-container .owl-carousel .owl-item img {
    height: 100%;
}

.customers-logo-list.home-customers-logo h3 {
    font-size: 22px;
    line-height: 28px;
}

.page-template-confidentiality-template .join-our-team-card-cover {
    margin-top: 0;
}

/* About us page */
.story-right-section {
    padding-top: 70px;
    padding-bottom: 0;
}

.sub-title {
    box-shadow: 0px 4px 10.1px 0px #FB88010A;
    font-size: 12px !important;
}

.enstacked-main-wrap {
    padding-top: 18px;
}

.join-our-team-card-cover ul {
    margin-top: 30px;
}

.great-people-main {
    padding-top: 30px;
    padding-bottom: 100px;
}

.our-blog-main {
    margin-top: 100px;
    margin-bottom: 100px;
}

.btn-mobile-only {
    display: none;
}

/* about us page ends */

/* case study signle post */
.challenges-text-left {
    position: sticky;
    top: 100px;
}

.responsive-layout-img,
.responsive-layout-wrap img {
    border-radius: 12px;
}

.products-main-wrap {
    border-radius: 10px;
}

.cloud-service-hero-main-right img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* contact us */
a.contact-info {
    color: var(--description-text-color);
    display: inline-flex;
    width: 100%;
    gap: 10px;
    align-items: center;
}

a.contact-info:hover {
    color: var(--brand-500) !important;
}

.delivering-top-main-text h1 {
    font-size: 40px;
    line-height: 54px;
    margin: 0 0 8px !important;
}

.delivering-top-main-text p {
    font-size: 16px;
    line-height: 20px;
}

.contactus-main-wrap .contact-imfo-cov h2 {
    padding-bottom: 12px;
}

.contact-info-text-cov {
    padding-top: 18px;
}

.contact-info-text-location {
    padding: 16px;
    margin-top: 18px;
}

.contact-info-text-email {
    padding: 16px;
}

.contact-info-text-location h3 {
    font-size: 16px !important;
}

.contact-form-wrap .form-group {
    margin-bottom: 20px;
}

.contact-form-wrap .custom-select {
    gap: 6px;
}

.contact-form-wrap .attectfile-cov .file-upload-label {
    font-size: 14px;
}

.contact-form-wrap .attectfile-cov .upload-icon {
    width: 24px;
    height: 24px;
}

.contact-form-wrap .attectfile-cov {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.contact-form-wrap .attectfile-form-info {
    width: 70%;
}

.contact-form-wrap .attectfile-send-btn {
    width: 30%;
}

.contact-form-wrap .com-new-btn {
    padding: 13px 50px;
}

.attectfile-send-btn.destop-hide {
    display: none;
}

.phone-field-wrap {
    display: grid;
    gap: 10px;
    grid-template-columns: auto 2fr;
    align-items: start;
}

.page-template-contact-template .contact-form-wrap .attectfile-cov {
    flex-direction: row;
    gap: 18px !important;
}

.page-template-contact-template .contact-form-wrap .attectfile-send-btn {
    margin-top: 34px;
}

/* Force error to be below, spanning both columns */
.phone-field-wrap .field-error {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.phone-field-wrap .phone-code {
    width: auto;
    padding: 21px 14px;
    height: 60px;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    border-radius: 10px;
    border: 1px solid #e4e2e1;
    background-color: #ffffff;
}

.file-upload-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    justify-content: space-between;
}

/* Inline errors below input fields */
.field-error {
    color: #d93025;
    font-size: 13px;
    margin-top: 6px;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #d93025;
}

.file-upload-status {
    font-size: 16px;
    opacity: 1;
    font-weight: 500;
}

.file-upload-status.is-error {
    color: #d93025;
}

.file-upload-status.is-success {
    color: #198754;
}

/* Make sure icon is visible even if svg has fixed fill */
.file-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    cursor: pointer;
}

.file-clear-btn svg {
    width: 34px;
    height: 34px;
    display: block;
}

/* Industries page */
.com-title-disc-cover h2 {
    margin-top: 16px;
    font-size: 40px;
    line-height: 52px;
}

.leading-with-change-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.com-title-disc-cover h6 {
    font-size: 16px;
}

.our-blog-container {
    background: #F8F5EE;
}

a.com-new-btn.desktop-hide {
    display: none;
}

/* Services pages */
.fsp h1 {
    max-width: 612px;
    margin: 0 auto !important;
}

.features-section-iner h3 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 10px;
}

.desktop-btn-hide {
    display: none;
}

/* home */
.wwa-box-two h3 span::after {
    background-color: #F8F5EE;
}

.home .our-blog-container {
    background: #fff;
}

#client-testimonials-new .owl-stage {
    display: flex;
}

.owl-carousel .owl-stage-outer {
    height: 100%;
}

.home .where-we-do-main {
    padding-top: 100px;
    padding-bottom: 100px;
}

.page-template-industries-template .where-we-do-main {
    margin-top: 100px;
    margin-bottom: 100px;
}

.where-we-do-main .owl-stage {
    display: flex;
}

.page-template-full-stack-services-template .our-client-say-main .full-width-btn,
.page-template-mobile-app-development-template .our-client-say-main .full-width-btn,
.page-template-ecommerce-development-template .our-client-say-main .full-width-btn,
.page-template-cloud-services-template .full-width-btn {
    display: none;
}

.py-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.page-template-mobile-app-development-template .delivering-top-main-text h1,
.page-template-ecommerce-development-template .delivering-top-main-text h1,
.page-template-uiux-design-template .delivering-top-main-text h1,
.page-template-cloud-services-template .delivering-top-main-text h1 {
    font-size: 48px;
    line-height: 62px;
    margin: 0 0 12px !important;
}

.partner-with-enstacked-main .full-width-btn {
    margin-top: 25px;
}

.com-title-disc-cover.left {
    text-align: left;
}

img.desktop-icon-hide {
    display: none;
}

@media (max-width: 991px) {
    .main-story-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media (max-width: 768px) {
    .fullstackdev-responimg img {
        width: 100%;
        display: block;
    }
}

@media (max-width: 767px) {
    .our-services-iner-card:last-of-type {
        border-color: #f8c6af;
        background-color: #fff8f5;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    }

    img.desktop-icon-hide {
        display: block;
    }

    .home .where-we-do-main {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .page-template-mobile-app-development-template .what-we-offer-main .com-title-disc-cover,
    .page-template-ecommerce-development-template .what-we-offer-main .com-title-disc-cover {
        text-align: left;
    }

    .page-template-full-stack-services-template .where-we-do-main .owl-theme .owl-nav {
        margin: 0;
    }

    .page-template-full-stack-services-template .our-client-say-main {
        padding-bottom: 70px;
    }

    .py-100 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .page-template-mobile-app-development-template .delivering-top-main-text h1,
    .page-template-ecommerce-development-template .delivering-top-main-text h1,
    .page-template-uiux-design-template .delivering-top-main-text h1,
    .page-template-cloud-services-template .delivering-top-main-text h1 {
        font-size: 26px;
        line-height: 34px;
    }

    .delivering-top-main-text.left {
        text-align: left;
    }

    .sub-title {
        font-size: 12px !important;
    }

    .story-content-wrap p {
        font-size: 14px;
        line-height: 20px;
    }

    .story-list-item ul li h4,
    .story-list-item ul li h3 {
        font-size: 14px;
        line-height: 20px;
    }

    .story-list-item ul li {
        font-size: 14px;
        line-height: 20px;
    }

    .whats-began-wrap p {
        font-size: 20px;
    }

    .story-right-section {
        padding-bottom: 0;
    }

    .enstacked-icon-text {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    .enstacked-schedule-call-btn {
        margin-top: 16px;
    }

    .great-people-text h3 {
        font-size: 18px !important;
    }

    .com-new-btn.btn-desktop-only {
        display: none;
    }

    .btn-mobile-only {
        display: block !important;
        text-align: center;
    }

    .btn-mobile-only .com-new-btn {
        justify-content: center;
    }

    .accolades-section-main {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .our-blog-main {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .our-blog-main .row {
        gap: 16px;
    }

    /* contact form */
    .attectfile-send-btn.destop-hide {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 12px;
    }

    .attectfile-send-btn.mobile-hide {
        display: none;
    }

    .contact-form-wrap .attectfile-form-info {
        width: 100%;
    }

    .contact-form-wrap .form-select {
        color: #B6B6B6;
        padding: 14px;
    }

    .delivering-top-main-text h1 {
        font-size: 30px;
        line-height: 42px;
    }

    .delivering-top-main-text p {
        font-size: 14px;
    }

    .contactus-main-wrap {
        padding: 20px;
        box-shadow: 5px 5px 10px 0px #0000001c;
    }

    .contactus-main-wrap .contact-imfo-cov h2 {
        font-size: 20px;
    }

    .contactus-main-wrap .contact-imfo-cov p,
    .contact-info-text-location h6 {
        font-size: 14px;
    }

    .contact-form-wrap .g-recaptcha {
        text-align: -webkit-center;
    }

    .file-upload-status {
        text-align: center;
    }

    /* Industries page	 */
    .leading-with-change-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .industry-content-images {
        position: relative;
        display: inline-block;
    }

    .industry-content-images::before {
        content: "";
        position: absolute;
        width: 86%;
        height: 40%;
        background: #FACEBB;
        border-radius: 16px;
        top: 165px;
        right: 34px;
        z-index: 0;
    }

    .industry-content-images img {
        position: relative;
        z-index: 1;
        border-radius: 24px;
    }

    a.com-new-btn.desktop-hide {
        display: flex;
        width: max-content;
        margin: 0 auto;
    }

    a.com-new-btn.mobile-hide {
        display: none;
    }

    /* home page */
    .our-services-cover {
        gap: 16px;
    }

    .wwa-box-two:nth-of-type(1) {
        background-color: var(--brand-50);
    }

    .wwa-box-one:nth-of-type(2) {
        background-color: #ffffff;
    }

    .where-we-do-main .owl-theme .owl-nav {
        margin: 20px 0;
    }

    /* careers page */
    .customers-logo-list.home-customers-logo h3 {
        text-align: center;
    }

    /* full stack */
    .fsh .delivering-top-main-text h1 {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .dark-bg.sub-title {
        font-size: 14px !important;
    }

    .desktop-btn-hide {
        display: block;
        text-align: center;
        margin-top: 20px;
    }

    .mobile-btn-hide {
        display: none;
    }

    .com-title-disc-cover h2 {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .ecommerce-development-hero-bot p {
        font-size: 14px;
        line-height: 20px;
    }

    .uiux-design-hero-sec-main ul {
        margin-top: 25px;
    }

    .center .com-title-disc-cover {
        text-align: center;
    }

    .projects-casestudies-main-section {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .projects-casestudies-main {
        padding-top: 14px;
    }

    .check-out-our-portfolio-cover h2 {
        font-size: 20px;
    }

    .our-Engagement-process-main .how-we-follow-iner,
    .how-we-follow-main .how-we-follow-iner {
        text-align: center;
    }
}

@media (max-width: 479px) {
    .page-template-industries-template .where-we-do-main {
        margin-bottom: 50px !important;
        margin-top: 50px !important;
    }

    .takea-lookat-main .accordion .accordion-item .accordion-collapse .accordion-body {
        padding-top: 0;
    }

    .page-template-confidentiality-template .px-0,
    .page-template-careers-template .px-0 {
        padding-left: 0;
        padding-right: 0;
    }

    .page-template-confidentiality-template .join-our-team-card-cover,
    .page-template-careers-template .join-our-team-card-cover {
        border-radius: 0;
    }

    .our-engagement-models-main .com-title-disc-cover h2 {
        font-size: 22px;
        line-height: 28px;
    }

    .how-we-wrok-main-hero .delivering-top-main-text h2 {
        font-size: 18px;
    }

    .cloud-service-hero-main-left .delivering-top-main-text p {
        font-size: 16px;
    }

    .cloud-service-hero-main-left .delivering-top-main-text h2 {
        font-size: 20px;
    }

    .delivering-top-main-text h2 {
        font-size: 26px;
    }

    .transf-Experie-cover ul li:nth-child(4) {
        margin-bottom: 0;
    }

    .main-story-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .com-title-disc-cover h2 {
        font-size: 24px;
        line-height: 30px;
    }

    .com-title-disc-cover .sub-title {
        font-size: 14px !important;
    }

    .com-title-disc-cover p {
        font-size: 16px !important;
    }

    .enstacked-main-wrap {
        padding-top: 4px;
        gap: 14px;
    }

    a.com-new-btn {
        font-size: 16px;
    }

    .join-our-team-card-cover {
        padding: 40px;
        padding-bottom: 50px;
    }

    .great-people-cov {
        gap: 20px 20px;
    }

    .great-people-main {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .accolades-section-main .com-title-disc-cover {
        text-align: center;
    }

    .ah {
        text-align: center !important;
    }

    .our-blog-card-text h6 {
        top: -20px;
        font-size: 14px;
    }

    .our-blog-card-text h4 {
        font-size: 18px;
        line-height: 20px;
    }

    .our-blog-card-text {
        justify-content: center;
        gap: 10px;
    }

    /* contact us page	 */
    .contactus-hero-section {
        padding-top: 85px;
        padding-bottom: 165px;
    }

    .contact-form-cov {
        box-shadow: none;
        padding: 0;
    }

    .contact-form-wrap .form-group input.form-control {
        padding: 15px 14px;
        font-size: 14px;
    }

    .contact-form-wrap .com-new-btn {
        padding: 15px 20px;
    }

    .easy-onboarding-step-main {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .contactus-section-main {
        padding-bottom: 50px;
    }

    .easy-onboarding-step-cover {
        gap: 12px;
    }

    .industry-content-images::before {
        content: "";
        position: absolute;
        width: 59%;
        height: 46%;
        background: #FACEBB;
        border-radius: 16px;
        top: 115px;
        right: 78px;
        z-index: 0;
    }

    /* home page */
    .main-new-home-hero-iner p.trail {
        font-size: 14px;
    }

    .main-new-home-hero-iner h1 {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    /* full stack dev */
    .delivering-top-main-cover {
        height: 684px;
    }

    .fsh .delivering-top-main-text h1 {
        font-size: 48px;
    }

    .mobile-app-serv-icon {
        width: 49px;
        height: 49px;
    }

    .mobile-app-serv-icon img {
        width: 28px;
        height: 28px;
    }

    .mobile-app-serv-main-right .mobile-appdev-img {
        top: 42px;
    }

    .partner-with-enstacked-main::after {
        background: #fff;
    }

    .partner-with-enstacked-wrap h2 {
        font-size: 24px;
        line-height: 30px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .page-template-uiux-design-template .projects-casestudies-img {
        padding: 0;
    }
}

@media (max-width: 425px) {
    .industry-content-images::before {
        content: "";
        position: absolute;
        width: 78%;
        height: 44%;
        background: #FACEBB;
        border-radius: 16px;
        top: 115px;
        right: 36px;
        z-index: 0;
    }
}

/* ============ BLOG SINGLE NEW LAYOUT ============ */
/* ============ HERO ============ */
.hero-section {
    /* Hero ground: plain white, per the owner's ruling on every hero. */
    background: var(--bg-surface);
    padding: 120px 0 60px;
}

.hero-inner {
    display: flex;
    gap: 50px;
    align-items: flex-start
}

.hero-left {
    flex: 1;
    max-width: 560px
}

.hero-right {
    flex: 1.3;
    display: flex;
    align-items: flex-start;
    padding-top: 10px
}

.hero-right img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08)
}

/* Category Tag */
.cat-tag {
    display: inline-block;
    margin-bottom: 22px
}

.cat-tag a {
    display: inline-block;
    color: #fff;
    font-weight: 500;
    background-color: var(--brand-500);
    padding: 5px 12px 5px 12px;
    border: 1px solid var(--brand-500);
    border-radius: 30px;
    letter-spacing: .3px;
    transition: background-color .3s, color .3s
}

.cat-tag a:hover {
    background-color: transparent;
    color: var(--brand-500)
}

/* Hero Title */
.hero-title {
    font-size: clamp(24px, 16px + 1.667vw, 36px);
    /* Fluid sizing: 24px at 480px up to 36px at 1200px */
    font-weight: 600;
    color: #000;
    margin-bottom: 24px
}

/* Author & Date Row */
.meta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.author-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.meta-dates {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #555;
}

.meta-divider {
    color: #d1d1d1;
}

.meta-label {
    font-size: 15px;
    font-weight: 400;
}

.meta-value {
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 768px) {

    .read-time,
    .meta-label,
    .meta-value {
        font-size: 12px;
    }
}

.author-info {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--brand-500);
    border-radius: 40px;
    padding: 4px 20px 4px 4px;
    cursor: pointer;
    transition: background-color .3s
}

.author-info:hover {
    background-color: var(--brand-500);
}

.author-info img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover
}

.author-info span {
    color: #000;
    font-weight: 500;
    transition: color .3s
}

.author-info:hover span {
    color: #fff;
}

.date-info,
.updated-info {
    color: #000;
    font-style: italic;
}

.read-time {
    color: #1a1a1a;
    font-weight: 400;
    font-size: 14px;
}

.hero-divider {
    width: 100%;
    height: 1px;
    background-color: #FA824E38;
    margin-bottom: 15px;
    border: none;
}

/* Social Share Row */
.social-icons {
    display: flex;
    gap: 12px;
    margin-top: 10px
}

.social-icons a,
.social-icons button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--brand-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--brand-500);
    cursor: pointer;
    transition: all .3s
}

.social-icons a:hover,
.social-icons button:hover {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
    transform: scale(1.08);
}

.social-icons svg {
    width: 18px;
    height: 18px;
    fill: var(--brand-500);
    transition: fill .3s
}

.social-icons a:hover svg path,
.social-icons a:hover svg circle,
.social-icons a:hover svg rect,
.social-icons button:hover svg path,
.social-icons button:hover svg circle,
.social-icons button:hover svg rect {
    fill: #fff;
    stroke: #fff;
}

/* ============ MAIN LAYOUT ============ */
.main-layout {
    display: flex;
    gap: 24px;
    padding: 40px 0 80px;
    align-items: flex-start
}

/* Left Sidebar */
.sidebar {
    width: 248px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    align-self: flex-start
}

/* TOC */
.toc-box {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 20px;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    user-select: none;
    transition: border-color .4s ease
}

.toc-header svg {
    transition: transform .3s ease
}

.toc-box.closed .toc-list {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    margin-top: 0;
}

.toc-box.closed .toc-header {
    border-bottom-color: transparent;
}

.toc-box.closed .toc-header svg {
    transform: rotate(180deg)
}



.toc-list {
    counter-reset: toc-counter;
    padding: 16px 20px 18px;
    max-height: 1000px;
    overflow-y: auto;
    opacity: 1;
    transition: max-height .4s cubic-bezier(0.4, 0, 0.2, 1), padding .4s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease;
    list-style: none;
    margin: 0;
}

/* Sleek custom scrollbar for Table of Contents list */
.toc-list::-webkit-scrollbar {
    width: 5px;
}

.toc-list::-webkit-scrollbar-track {
    background: transparent;
}

.toc-list::-webkit-scrollbar-thumb {
    background: #e8e8e8;
    border-radius: 10px;
}

.toc-list::-webkit-scrollbar-thumb:hover {
    background: #d4d4d4;
}

.toc-list li {
    counter-increment: toc-counter;
    margin-bottom: 8px
}

.toc-list li a {
    color: #555;
    display: flex;
    gap: 8px;
    transition: color .3s;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    text-decoration: none;
}

.toc-list li a::before {
    content: counter(toc-counter);
    color: #555;
    font-weight: 400;
    min-width: 14px;
    flex-shrink: 0;
    transition: color .3s
}

.toc-list li a:hover,
.toc-list li a.active {
    color: var(--brand-500)
}

.toc-list li a:hover::before,
.toc-list li a.active::before {
    color: var(--brand-500)
}

/* Sidebar CTA */
.sidebar-cta {
    background: #FEF0EB;
    border: 1px solid #f6dcd0;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    text-align: left;
}

.sidebar-cta h4 {
    font-size: 18px;
    font-weight: 500;
    color: #444;
    margin-bottom: 16px;
}

.sidebar-cta .cta-btn {
    display: inline-block;
    background: rgb(239, 98, 36);
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.3s;
}

.sidebar-cta .cta-btn:hover {
    background: #d4521b
}

/* ============ RIGHT SIDEBAR ============ */
.sidebar-right {
    width: 260px
}

.contact-box {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.sidebar-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 0 0 16px;
    font-family: 'Instrument Sans', sans-serif;
    letter-spacing: -0.3px;
}

.toc-header .sidebar-title {
    margin: 0;
}

.sidebar-form {
    padding: 0px;
    border-radius: 12px;
}

.sidebar-form input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 16px;
    border: 1px solid #f2e2db;
    border-radius: 8px;
    font-family: inherit;
    background: #fff;
    color: #333;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.sidebar-form input::placeholder {
    color: #a9a9a9;
    font-weight: 400;
}

.sidebar-form input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(239, 98, 36, 0.12);
    transform: translateY(-1px);
}

.sidebar-form button {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--brand-500) 0%, #d4521b 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    letter-spacing: 0.5px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(239, 98, 36, 0.25);
}

.sidebar-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 98, 36, 0.35);
    background: linear-gradient(135deg, #f57137 0%, #e05e27 100%);
}

.recent-blogs {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}



.blog-item {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0
}

.blog-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none
}

.blog-item a {
    font-weight: 400;
    color: #444;
    display: block;
    margin-bottom: 5px;
    transition: color .3s
}

.blog-item a:hover {
    color: var(--brand-500)
}

.blog-meta {
    color: var(--brand-500);
    font-style: italic;
    font-size: 14px;
}

.blog-meta span {
    color: #999;
    font-style: normal;
    margin: 0 3px
}

/* ============ CONTENT AREA ============ */
.content-area {
    max-width: 100%;
    flex: 1;
    min-width: 0
}

/* Post Footer */
.post-footer {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #eaeaea
}

.post-footer .published-date {
    color: #111;
    font-weight: 500;
    margin-bottom: 24px
}

.post-links {
    display: flex;
    align-items: center;
    gap: 16px
}

.post-links a {
    font-weight: 500;
    color: var(--brand-500);
    transition: color .3s;
    text-decoration: none
}

.post-links a:hover {
    color: #d4521b
}

.post-links .divider {
    color: #666;
    font-weight: 300
}

/* FAQ Layout if needed */
.faq-section {
    margin-top: 60px;
    padding-bottom: 40px;
}

.faq-main-title {
    font-weight: 700;
    color: #000;
    margin-bottom: 24px;
    text-align: left;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item.active {
    border-color: #f0c4a8;
    background: #FEF0EB;
}

.faq-item.active .faq-question {
    color: var(--brand-500);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 500;
    color: #111;
    gap: 20px;
    transition: color 0.3s ease;
    user-select: none;
}

.faq-question:hover {
    color: var(--brand-500);
}

.faq-question .faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    width: 22px;
    height: 22px;
}

.faq-icon svg {
    width: 22px;
    height: 22px;
    position: absolute;
    color: #111;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-icon .icon-plus {
    opacity: 1;
    transform: rotate(0deg);
}

.faq-icon .icon-minus {
    opacity: 0;
    transform: rotate(-90deg);
}

.faq-item.active .faq-icon .icon-plus {
    opacity: 0;
    transform: rotate(90deg);
}

.faq-item.active .faq-icon .icon-minus {
    opacity: 1;
    transform: rotate(0deg);
}

.faq-answer {
    overflow: hidden;
    height: 0;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-content {
    padding: 0 24px 20px;
}

.faq-answer p {
    color: #555;
    margin: 0;
}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px) {
    .hero-inner {
        flex-direction: column
    }

    .main-layout {
        flex-direction: column
    }

    .sidebar {
        width: 100%;
        position: relative;
        top: 0
    }
}

@media(max-width:768px) {
    .table-wrap {
        margin: 20px -12px;
        border-radius: 0
    }
}

/* additional formatting for tables if needed */
.table-wrap {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 30px 0
}

.table-wrap table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    background: #fff
}

.table-wrap th {
    color: var(--brand-500);
    font-weight: 700;
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd
}

.table-wrap td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
    color: #000
}

.table-wrap tr:nth-child(odd) td {
    background: rgba(128, 128, 128, .07)
}

.table-wrap td:first-child {
    width: 160px;
    font-weight: 700
}

/* =========================================================================
   Shopify Mastery Hero Section
   ========================================================================= */

.modern-hero-section {
    /* Hero ground: plain white, per the owner's ruling on every hero. */
    background: var(--bg-surface);
    padding: 160px 0 80px;
    /* Fixed header overlap */
    color: #1a1a1a;
    overflow: hidden;
}

.modern-hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Column */
.modern-hero-left {
    padding-right: 20px;
}

.modern-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--brand-500);
    text-transform: uppercase;
    margin-bottom: 24px;
}

.modern-title {
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}

.modern-title .italic-highlight {
    font-style: italic;
    color: var(--brand-500);
}

.modern-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 35px;
    max-width: 95%;
}

.modern-hero-ctas {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 25px;
}

.hero-trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 40px;
}

.hero-trust-badge svg {
    display: block;
}

.hero-trust-badge .trust-text {
    font-size: 20px;
    letter-spacing: -0.5px;
    color: #1a1a1a;
    font-weight: 300;
}

.hero-trust-badge .trust-text strong {
    font-weight: 800;
}

.modern-btn-primary {
    background: var(--brand-500);
    color: #fff;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px -10px rgba(232, 93, 32, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
}

.modern-btn-primary:hover {
    background: var(--brand-500);
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -10px rgba(239, 98, 36, 0.6);
    color: #fff;
}

.modern-btn-secondary {
    background: #f0ebe4;
    color: #1a1a1a;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modern-btn-secondary:hover {
    background: #e6e0d8;
    transform: translateY(-2px);
}

.modern-scroll-prompt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #999;
    text-transform: uppercase;
}

/* Shopify Mastery Grid */
.shopify-mastery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}

.sm-card {
    background: #fff;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

@media (hover: hover) {
    .sm-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.1);
    }
}

.sm-card-wide {
    grid-column: span 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.sm-card-dark {
    background: #111;
    color: #fff;
}

.sm-card-orange {
    background: linear-gradient(135deg, var(--brand-500) 0%, #ff8e3c 100%);
    color: #fff;
}

.sm-card-light {
    background: #fff;
    color: #1a1a1a;
}

.sm-title {
    font-size: 18px;
    margin-bottom: 12px;
}

.sm-card-dark .sm-title,
.sm-card-orange .sm-title {
    color: #fff;
}

.sm-desc {
    font-size: 14px;
    color: #999;
    line-height: 1.5;
    max-width: 200px;
}

/* Card 1: Code Editor Window */
.premium-card-1 {
    background: #0d0d12;
    position: relative;
    overflow: hidden;
}

.card-mesh-bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(232, 93, 32, 0.15), transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(162, 89, 255, 0.1), transparent 30%);
    z-index: 0;
    pointer-events: none;
}

.premium-card-1 .sm-card-content {
    position: relative;
    z-index: 1;
}

.premium-editor-mockup {
    background: rgba(25, 25, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 260px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
    transition: transform 0.4s ease;
}

@media (hover: hover) {
    .premium-card-1:hover .premium-editor-mockup {
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-5px);
    }
}

.editor-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    display: flex;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.editor-header .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.editor-header .dot.red {
    background: #ff5f56;
}

.editor-header .dot.yellow {
    background: #ffbd2e;
}

.editor-header .dot.green {
    background: #27c93f;
}

.editor-body {
    padding: 15px;
    font-family: var(--font-body); /* was Fira Code */
    font-size: 11px;
    line-height: 1.5;
    color: #e0e0e0;
}

.editor-body .keyword {
    color: #c678dd;
}

.editor-body .component {
    color: #e5c07b;
}

.editor-body .string {
    color: #98c379;
}

.editor-body .prop {
    color: #d19a66;
}

.cursor {
    display: inline-block;
    width: 6px;
    height: 12px;
    background: var(--brand-500);
    animation: blink 1s step-end infinite;
    vertical-align: middle;
    margin-left: 2px;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Card 2: Shopify Big Logo & Glass Nodes */
.premium-card-2 {
    background: linear-gradient(135deg, var(--brand-500) 0%, #d44d15 100%);
    position: relative;
}

.bg-mesh-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    z-index: 0;
}

.bg-shopify-logo {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 200px;
    height: 200px;
    opacity: 0.1;
    transform: rotate(-10deg);
    z-index: 0;
    pointer-events: none;
}

.content-z {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Card 2: Services Bento */
.services-bento {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.svc-bento-row {
    display: flex;
    gap: 8px;
}

.svc-box {
    flex: 1;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    transition: all 0.3s ease;
    white-space: nowrap;
    cursor: default;
}

.svc-box.wide {
    flex: 100%;
}

.svc-box.highlight {
    background: #fff;
    color: var(--brand-500);
    border-color: #fff;
}

.svc-box:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.svc-box.highlight:hover {
    background: #fdfdfd;
}

/* Card 3: ROAS Dashboard */
.premium-card-3 {
    background: #fff;
    display: flex;
    flex-direction: column;
}

.roas-dashboard {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

.roas-metrics {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.roas-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rm-label {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
}

.rm-val {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
}

.roas-metric.highlight .rm-val {
    color: var(--brand-500);
    display: flex;
    align-items: center;
    gap: 6px;
}

.rm-badge {
    background: #e6f9e6;
    color: #27c93f;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 800;
}

.cro-bg-graph {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Interactive Slider Styles */
.cro-slider-container {
    margin-bottom: 20px;
    background: #fdfaf6;
    padding: 12px 15px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.cro-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cro-slider-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
}

.cro-slider-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--brand-500);
    background: rgba(232, 93, 32, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
}

.cro-range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 4px;
    outline: none;
}

.cro-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-500);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(232, 93, 32, 0.5);
    border: 3px solid #fff;
    transition: transform 0.1s;
}

.cro-range-slider::-webkit-slider-thumb:active {
    transform: scale(1.1);
}

.cro-range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-500);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(232, 93, 32, 0.5);
    border: 3px solid #fff;
}

@keyframes floatBob {

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

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

@keyframes pulseGreen {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(39, 201, 63, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(39, 201, 63, 0);
    }
}

/* Infinite Marquee Section */
.modern-brands-section {
    padding: 65px 0;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.modern-brands-section .com-title-disc-cover {
    display: block;
    text-align: left;
    margin-bottom: 50px;
    max-width: 100%;
}

.modern-brands-section .com-title-disc-cover h2 {
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.modern-brands-section .brand-desc {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    /* Edge fade masks */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 60px;
    padding-left: 60px;
    animation: scrollMarquee 30s linear infinite;
    width: max-content;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 160px;
    height: 90px;
}

.marquee-logo img {
    max-width: 140px;
    max-height: 60px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.5);
    transition: all 0.3s ease;
    cursor: pointer;
}

.marquee-logo:hover img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

@media (max-width: 991px) {
    .modern-hero-section {
        padding: 100px 0 45px;
    }
    .modern-brands-section {
        padding: 45px 0;
    }
    .modern-hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .modern-hero-ctas .com-new-btn,
    .modern-hero-ctas .com-new-btn-white {
        padding: 14px 28px !important;
    }
    .modern-hero-ctas {
        gap: 15px;
    }
    .modern-hero-left {
        padding-right: 0;
    }
    .modern-hero-right {
        min-width: 0;
        width: 100%;
    }
    .shopify-mastery-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        align-items: stretch;
    }
    .shopify-mastery-grid::-webkit-scrollbar {
        display: none;
    }
    .sm-card {
        flex: 0 0 90%;
        scroll-snap-align: start;
        height: auto;
    }
    .sm-card-wide {
        grid-column: span 1;
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .sm-card-wide .sm-desc {
        max-width: 100%;
        margin: 0 auto;
    }
    .modern-brands-section .com-title-disc-cover {
        text-align: center;
    }
}

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

    100% {
        transform: translateX(calc(-50% - 30px));
    }
}