/* ==========================================================================
   TetraHobbit — Typography, Responsive & Motion Enhancements
   --------------------------------------------------------------------------
   Loaded LAST on every page. It only overrides existing rules; no original
   selector, class or script hook has been renamed or removed. Delete this
   file's <link> to fall back to the previous look.

   1. Design tokens
   2. Base typography
   3. Type scale (heroes, section titles, leads, cards, body copy)
   4. Labels, buttons, navigation, footer
   5. Legal pages (privacy / terms)
   6. Responsive fixes
   7. Scroll-animation (AOS) tuning
   ========================================================================== */


/* 1. Design tokens
   ========================================================================== */
:root {
    --th-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --th-font-heading: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Existing stylesheets read this variable everywhere, so body text follows automatically */
    --primary-font: var(--th-font-body);

    /* Fluid type scale — min @ 320px, max @ ~1440px.
       Floors: body text never below 15px, labels never below 13px. */
    --fs-display: clamp(2rem, 1.45rem + 2vw, 2.875rem);         /* 32 → 46 */
    --fs-h2: clamp(1.625rem, 1.25rem + 1.5vw, 2.5rem);          /* 26 → 40 */
    --fs-h3: clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem);        /* 21 → 28 */
    --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);      /* 18 → 21 */
    --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);       /* 17 → 19 */
    --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);         /* 16 → 17 */
    --fs-sm: 1rem;                                              /* 16 */
    --fs-xs: 0.9375rem;                                         /* 15 */
    --fs-2xs: 0.875rem;                                         /* 14 */
    --fs-eyebrow: 0.8125rem;                                    /* 13 */

    --lh-heading: 1.2;
    --lh-body: 1.7;
    --ls-heading: -0.02em;
    --ls-eyebrow: 0.1em;

    --th-text: #1e293b;
    --th-text-muted: #475569;
    --th-focus: #0ea5e9;
}


/* 2. Base typography
   ========================================================================== */

/* The old stylesheet shrank the root to 11–13px on phones, which made every
   rem-based size (and Bootstrap inputs) tiny and triggered iOS input zoom.
   100% respects the visitor's browser setting (16px by default). */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--th-font-body);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
}

/* Sections that hard-coded a different stack */
.frequently_asked_wrapper,
.vision_wrapper {
    font-family: var(--th-font-body);
}

/* Display face for headings and heading-like labels.
   !important is required because ~40 existing rules set
   `font-family: var(--primary-font)` on headings with higher specificity. */
h1, h2, h3, h4, h5, h6,
.name,
.label-text,
.process_step_title,
.process_center_label,
.tools_bs_brand_name,
.tools_bs_nav_text,
.tech_tab_label,
.vision_card_title,
.Our_Result_driven_vertical_label {
    font-family: var(--th-font-heading) !important;
}

:where(h1, h2, h3) {
    letter-spacing: var(--ls-heading);
    text-wrap: balance;
}

:where(h4, h5, h6) {
    letter-spacing: -0.01em;
}

:where(p, li) {
    text-wrap: pretty;
}

img {
    max-width: 100%;
}

/* Images now carry width/height attributes so the browser can reserve space
   (no layout shift while loading). Those attributes also act as a fallback
   height, which would stretch any image that CSS sizes by width alone.
   :where() gives this rule zero specificity: it overrides the HTML attribute
   but loses to every real CSS rule, so `.card img { height: 100% }` still wins. */
:where(img[width][height]) {
    height: auto;
}

/* Images are wrapped in <picture> to offer WebP with a PNG fallback.
   display:contents keeps the <img> as the layout box, so every existing
   flex/grid rule targeting the image continues to apply unchanged. */
picture {
    display: contents;
}

/* Visible keyboard focus (many components remove outlines) */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--th-focus) !important;
    outline-offset: 2px;
}


/* 3. Type scale
   ========================================================================== */

/* ---- Heroes ---- */
.dashboard_heading h1,
.service_hero_content h1 {
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

/* Home hero sits in a narrow 4-col column — keep it a touch smaller */
.dashboard_wrapper .dashboard_heading h1 {
    font-size: clamp(2rem, 1.5rem + 1.3vw, 2.625rem);
}

/* Direct child only — the Services hero nests a CTA <p> inside .btn_Prepare_wrapper */
.dashboard_heading > p {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: var(--th-text);
}

.service_hero_content p {
    font-size: var(--fs-lead);
    line-height: 1.75;
}

/* ---- Section titles (one consistent H2 scale site-wide) ---- */
.common_Heading h2,
.tech_capabilities_wrapper .common_Heading h2,
.development_services_heading h2,
.app_solutions_heading h2,
.tools_technology_heading h2,
.app_process_heading h2,
.why_choose_us_content h2,
.solution_Faq_info h2,
.Product_Design_Services_wrapper .Product_Design_Services_title {
    font-size: var(--fs-h2) !important;
    line-height: var(--lh-heading) !important;
    font-weight: 700;
    letter-spacing: var(--ls-heading);
}

/* Highlight words inside titles now match the title size instead of shrinking */
.common_Heading h2 span {
    font-size: inherit;
    font-weight: inherit;
}

/* About-page intro headings sit in narrow columns — one step smaller */
.common_Heading.about_creative_heading h2 {
    font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem) !important;
    line-height: 1.25 !important;
    padding-right: 0;
}

/* Secondary headings */
.trusted_brands_heading h2,
.portfolio_heading h2 {
    font-size: var(--fs-h3);
    line-height: 1.3;
    font-weight: 700;
}

.web_dev_heading h3 {
    font-size: var(--fs-h4);
    font-weight: 700;
}

/* ---- Section intro paragraphs ---- */
/* (.section_eyebrow is a label, styled in section 8) */
.common_Heading p:not(.section_eyebrow),
.development_services_heading p,
.app_solutions_heading p,
.tools_technology_heading p,
.app_process_heading p,
.why_choose_us_content > p,
.Product_Design_Services_wrapper .Product_Design_Services_desc {
    font-size: var(--fs-lead) !important;
    line-height: var(--lh-body);
}

/* Comfortable reading measure for centred intros */
.common_Heading:not(.align-items-start) > p {
    max-width: 780px;
}

/* ---- Card & component titles ---- */
.industries_card h4 {
    font-size: var(--fs-h4);
    font-weight: 700;
}

.industries_card p {
    font-size: var(--fs-xs);
    line-height: 1.6;
}

.service-content h5 {
    font-size: 1.0625rem;
    font-weight: 700;
}

.service-content p {
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: 1.6;
}

.card-content p {
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.7;
    color: var(--th-text);
}

.tech_capabilities-card {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.trending_detail_content h3 {
    font-size: var(--fs-sm);
    letter-spacing: 0;
}

.tools_bs_brand_name {
    font-size: 1.0625rem;
}

.web_factor_content p {
    font-size: 1rem;
}

.accordion_header_content h4 {
    font-weight: 600;
}

.accordion_header_content p {
    font-size: var(--fs-xs);
    line-height: 1.5;
}

.card-desc {
    font-size: var(--fs-sm);
    line-height: 1.65;
}

.Our_Result_driven_wrapper .Our_Result_driven_title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
    letter-spacing: var(--ls-heading);
}

.Product_Design_Services_wrapper .Product_Design_Services_card_text {
    font-weight: 400;
}

.vision_wrapper .vision_card_text {
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.vision_wrapper .vision_slide_title {
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem);
    letter-spacing: var(--ls-heading);
}

.vision_wrapper .vision_slide_desc {
    font-size: var(--fs-lead);
    line-height: 1.75;
}

.review-text {
    font-weight: 400;
}

/* ---- Body copy (was 13–15px, weight 500, pure black) ---- */
.about_creative_content p,
.transformative_experience_content p {
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.75;
    color: var(--th-text);
}

.web-dev-content p {
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--th-text);
}

.portfolio_heading p {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--th-text-muted);
}

.tab-content p {
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.7;
    color: var(--th-text);
}

.solution_Faq_info p {
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.75;
}

.portfolio_container_wrapper .portfolio_info_section .portfolio_card-title {
    line-height: 1.6;
}

.regional_contact_card_content p {
    font-size: var(--fs-xs) !important;
}


/* 4. Labels, buttons, navigation, footer
   ========================================================================== */

/* ---- Eyebrow labels / tags ---- */
.service_form_tag,
.trusted_brands_tag,
.development_services_tag,
.app_solutions_tag,
.tools_technology_tag,
.app_process_tag,
.why_choose_us_tag,
.service_hero_subtitle,
.common_Heading span.badge_text,
.vision_wrapper .vision_value_label {
    font-family: var(--th-font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

/* #F2701E on its own 10% tint measured 2.95:1 — below the 4.5:1 minimum for
   small text. This darker orange keeps the brand tone and reaches 4.6:1. */
.common_Heading span.badge_text {
    color: #C2410C;
}

/* Direct child only — the service hero has a Material icon <span> nested deeper */
.dashboard_wrapper .dashboard_heading > span {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.regional_contact_card_content h5 {
    font-family: var(--th-font-body) !important;
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
}

/* ---- Buttons ---- */
.btn,
.hero_primary_btn,
.hero_secondary_btn,
.service_form_submit_btn,
.cdf_btn,
.submit-btn,
.btn-start,
.tech_tab_btn,
.view-link,
.Our_Result_driven_btn,
.btn_Prepare_wrapper a,
.newsletter_btn {
    font-family: var(--th-font-body);
    letter-spacing: 0.01em;
}

.dashboard_heading button,
.technology_experts button,
.transformative_experience_content button {
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0.625rem 1.25rem;
}

.cdf_btn,
.submit-btn,
.service_form_submit_btn {
    font-weight: 600;
}

/* Links inside these buttons had their own smaller sizes (12–13px) */
.transformative_experience_content button a,
.portfolio_btn button a,
.dashboard_card_content button a {
    font-size: var(--fs-2xs);
}

.main_header_wrap .navbar_menu_wrapper .dropdown .btn-secondary {
    font-size: var(--fs-2xs);
}

.tech_tab_btn {
    font-size: var(--fs-2xs);
}

/* ---- Text floors: nothing readable below 14px ---- */
.content-card p,
.mini-card p,
.service-count,
.technology_expert_form .form-check-label,
.address_card_content h4 {
    font-size: var(--fs-2xs);
}

.address_card_content p {
    font-size: var(--fs-xs);
}

@media (max-width: 767.98px) {
    .tabs_container .nav-pills .nav-link {
        font-size: var(--fs-xs) !important;
    }
}

@media (max-width: 620px) {
    .announcement_bar ul li {
        font-size: var(--fs-2xs) !important;
    }
}

/* ---- Navigation ---- */
/* Menu links: 15px on large screens, 14.5px on laptops, 13.5px at 1200–1299.
   Side padding is trimmed at each step so all items (incl. Careers) fit on
   one row. Labels never wrap. */
@media (min-width: 1200px) {
    .main_header_wrap .navbar_menu_wrapper li a.nav-link {
        white-space: nowrap;
    }
}

@media (min-width: 1400px) {
    .main_header_wrap .navbar_menu_wrapper li a.nav-link {
        font-size: var(--fs-xs);
        padding: 8px 10px;
    }
}

@media (min-width: 1300px) and (max-width: 1399.98px) {
    .main_header_wrap .navbar_menu_wrapper li a.nav-link {
        font-size: 0.90625rem;
        padding: 10px 8px;
    }
}

@media (min-width: 1200px) and (max-width: 1299.98px) {
    .main_header_wrap .navbar_menu_wrapper li a.nav-link {
        font-size: 0.84375rem;
        padding: 10px 6px;
    }
}

/* Below 1400 the Get in Touch button sits a little closer and slimmer */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .main_header_wrap .navbar_menu_wrapper li.ms-xl-3 {
        margin-left: 0.5rem !important;
    }

    .main_header_wrap .navbar_menu_wrapper .header_cta_btn {
        padding: 9px 16px;
    }
}

/* Mobile sidebar links keep responsive.css's 14px */
@media (max-width: 1199.98px) {
    .sidebar_label {
        font-size: 0.75rem;
    }
}

.dropdown-item {
    font-size: var(--fs-xs) !important;
}

/* ---- Footer ---- */
.footer_connection_section h2,
.footer_feature_box h2 {
    font-family: var(--th-font-heading) !important;
    font-size: 1.125rem !important;
    letter-spacing: 0.08em;
}

.footer_connection_section h3 {
    font-size: 1.0625rem !important;
}

.footer_connection_box p {
    font-size: var(--fs-xs) !important;
    line-height: 1.7 !important;
}

.footer_copyright p {
    font-size: var(--fs-2xs);
}

.footer_connection_section ul li {
    font-size: var(--fs-xs) !important;
}

/* Links used line-height 3.2 as spacing and never wrapped, so long labels
   overflowed into the next column on phones. Padding keeps the rhythm, and
   wrapping is allowed. */
.footer_feature_box ul li a {
    font-size: var(--fs-xs) !important;
    line-height: 1.5 !important;
    padding: 9px 0;
    white-space: normal !important;
}

.footer_connection_section h2::after,
.footer_feature_box h2::after,
.footer_connection_box h3::after {
    left: 0 !important;
    transform: none !important;
}


/* 5. Legal pages (privacy-policy.html, terms-and-conditions.html)
   These pages had no styles, so long-form text used browser defaults.
   ========================================================================== */
.privacy_policy_wrapper .privacy-box {
    max-width: 920px;
    margin-inline: auto;
    border: 1px solid #e5e7eb;
    border-radius: 20px;   /* markup uses .rounded-4, which Bootstrap 5.0.2 doesn't have */
    color: var(--th-text);
}

.privacy-box h1 {
    font-size: var(--fs-display);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
}

.privacy-box h2 {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    font-weight: 700;
    color: #0f172a;
    margin: 2.25rem 0 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eef2f7;
}

.privacy-box p,
.privacy-box li {
    font-size: var(--fs-body);
    line-height: 1.8;
    color: #334155;
}

.privacy-box ul {
    list-style: disc;
    padding-left: 1.35rem;
    margin-bottom: 1.25rem;
}

.privacy-box li {
    margin-bottom: 0.5rem;
}

.privacy-box li::marker {
    color: #1665A4;
}

.privacy-box strong {
    color: #0f172a;
    font-weight: 600;
}

.privacy-box a {
    color: #1665A4;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.privacy-box .info-box {
    background: #f0f7ff;
    border-left: 4px solid #1665A4;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    font-size: var(--fs-sm);
    line-height: 1.75;
    color: #1e3a5f;
}


/* 6. Responsive fixes
   ========================================================================== */

/* ---- All widths ---- */

/* Fixed 375px image overflowed its 4-col parent between 1200–1399px */
.portfolio_container_wrapper .portfolio_center_img {
    width: 100%;
    max-width: 375px;
    height: auto;
    aspect-ratio: 375 / 236;
}

/* Fixed 425px box overflowed small phones */
.solution_Faq_img {
    width: 100%;
    max-width: 425px;
    height: auto;
    aspect-ratio: 1179 / 988;
}

.btn_Prepare_wrapper {
    max-width: 100%;
    height: auto;
    min-height: 68px;
}

.web_logo_wrapper {
    max-width: 60vw;
}

/* ---- ≤ 1199px (tablets & small laptops) ---- */
@media (max-width: 1199.98px) {

    /* Hero service cards were stretched with background-size: 100% 100%.
       Keep the artwork's own ratio and anchor it to the illustrated side. */
    .dashboard_card {
        height: auto;
        min-height: 150px;
        aspect-ratio: 822 / 366;
        background-size: cover;
        background-position: right center;
    }

    .dashboard_card_content {
        width: 45%;
    }

    .industries_card h4 {
        font-size: var(--fs-h4);
    }

    .solution_Faq_img {
        max-width: 380px;
        margin-inline: auto;
    }

    /* Only the active card needs the tall layout; idle cards were 350px boxes of whitespace */
    .service-card:not(.active-card) {
        min-height: 0;
    }

    .footer_feature_box ul li a {
        font-size: var(--fs-xs) !important;
    }

    .trending_detail_content h3 {
        font-size: var(--fs-xs);
    }
}

/* ---- ≤ 991px ---- */
@media (max-width: 991.98px) {

    /* Show the headline before the lead form when the hero stacks */
    .service_hero_content {
        order: -1;
    }

    .web-dev-content {
        width: 100%;
    }

    .transformative_experiences_img {
        height: auto;
    }

    .transformative_experiences_img img {
        height: auto;
        max-height: 520px;
    }

    /* Trending boxes: tidy 2-column grid instead of 4 cramped boxes */
    .trending_detail_box_wrappers {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .trending_detail_box_wrappers .trending_detail_box,
    .trending_detail_box_wrappers .trending_img_box {
        margin-top: 0 !important;
    }

    .trending_detail_box {
        justify-content: flex-start;
        padding: 0 18px;
    }
}

/* ---- ≤ 767px (phones, landscape tablets) ---- */
@media (max-width: 767.98px) {

    /* Root is 16px again, so trim Bootstrap's section spacing to phone scale */
    main > section.py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    main > section.mt-5 {
        margin-top: 1.5rem !important;
    }

    main > section.mt-3 {
        margin-top: 0.5rem !important;
    }

    #footer {
        margin-top: 48px;
    }

    /* 16px inputs stop iOS Safari from zooming on focus */
    .cdf_input,
    .service_hero_form .form-control,
    .newsletter_box input,
    .technology_expert_form form .form-control {
        font-size: 16px !important;
    }

    .service_hero_section {
        padding: 48px 0 56px;
    }

    .service_hero_wrapper {
        gap: 32px;
    }

    .solution_Faq_img {
        max-width: 320px;
    }

    .about_creative_content p,
    .transformative_experience_content p {
        font-size: var(--fs-sm) !important;
        font-weight: 400 !important;
    }

    .tabs_container .tab-content p {
        font-size: var(--fs-xs) !important;
        line-height: 1.7 !important;
    }

    .accordion_header_content p {
        font-size: var(--fs-2xs) !important;
    }

    /* Hero text is left-aligned on phones, so its button should be too */
    .dashboard_heading button {
        margin: 0;
    }

    .web-dev-content p {
        font-size: var(--fs-sm);
        line-height: 1.7;
    }

    /* Why-choose-us: two 460px mockups stacked = ~950px of decoration on phones */
    .why_choose_us_visual {
        text-align: center;
    }

    .why_visual_card_back,
    .why_shape_dots {
        display: none;
    }

    .why_visual_card_front {
        height: 380px;
    }
}

/* ---- ≤ 575px (small phones) ---- */
@media (max-width: 575.98px) {

    .dashboard_card_content {
        width: 48%;
        margin-left: 18px;
    }

    .dashboard_card_content h4 {
        font-size: 1rem;
        line-height: 1.35;
    }

    /* Contact form: one column instead of two cramped ones.
       1 / -1 (not "span 2") so the grid doesn't create a phantom column. */
    .cdf_row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .cdf_col_full {
        grid-column: 1 / -1;
    }

    .cdf_card {
        padding: 22px 18px;
    }

    .cdf_title {
        font-size: 1.375rem;
    }

    .technology_expert_form {
        padding: 28px 20px;
    }

    .regional_contact_card {
        padding: 24px;
        border-radius: 22px;
    }

    .industries_card_wrapper {
        padding: 16px;
    }

    .portfolio_slider_wrapper {
        padding: 24px 40px;
    }

    .solution_Faq_accordion_wrap .custom-accordion .accordion-body {
        padding: 0 18px 20px;
    }

    /* Was 11px, weight 800, uppercase */
    .tech_capabilities-card {
        font-size: var(--fs-2xs);
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
    }

    /* Trending boxes stack icon over label */
    .trending_detail_box {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        height: auto;
        min-height: 110px;
        padding: 16px 10px;
        gap: 10px;
    }

    .footer_feature_box ul li a i {
        margin-right: 10px;
        flex-shrink: 0;
    }
}

/* ---- ≤ 400px ---- */
@media (max-width: 400px) {
    .review-text {
        font-size: var(--fs-2xs);
        line-height: 1.5;
    }

    .process_step_body {
        padding-left: 16px;
    }
}


/* 7. Scroll animations (AOS)
   Attributes are added by assets/js/animations.js only to elements that start
   below the fold, so nothing flashes and nothing is hidden if JS fails.
   AOS's default 100px travel is replaced with a subtler distance.
   ========================================================================== */
html [data-aos="fade-up"] {
    transform: translate3d(0, 28px, 0);
}

html [data-aos="fade-left"] {
    transform: translate3d(32px, 0, 0);
}

html [data-aos="fade-right"] {
    transform: translate3d(-32px, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* 8. Component modifiers (moved out of inline style="" attributes)
   ========================================================================== */

/* ---- Header ---- */
.announcement_icon {
    font-size: 12px;
    color: #38bdf8;
}

.announcement_divider {
    opacity: 0.3;
}

.pay_now_menu {
    border-radius: 15px;
    min-width: 220px;
}

/* ---- Home ---- */
.dashboard_content_layer {
    position: relative;
    z-index: 1;
}

.common_Heading .section_eyebrow {
    color: #1665A4;
    font-size: var(--fs-eyebrow) !important;
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.common_Heading p.heading_para_narrow {
    max-width: 80%;
}

.portfolio_features_box.portfolio_features_box_alt {
    background: #E2E9F0;
}

/* ---- Industries cards (home + about) ---- */
.industries_card.industry_healthcare    { background-color: #E1D6EE; }
.industries_card.industry_finance       { background-color: #E2E9F0; }
.industries_card.industry_restaurant    { background-color: #CFEDF7; }
.industries_card.industry_ecommerce     { background-color: #F9EBD9; }
.industries_card.industry_saas          { background-color: #EBDCF3; }
.industries_card.industry_travel        { background-color: #F6E8C1; }
.industries_card.industry_entertainment { background-color: #FDD9DB; }
.industries_card.industry_ondemand      { background-color: #F6F9DC; }
.industries_card.industry_social        { background-color: #DDE8FA; }
.industries_card.industry_logistics     { background-color: #F1F0C4; }
.industries_card.industry_education     { background-color: #FCD8E6; }
.industries_card.industry_realestate    { background-color: #FBEEE5; }
.industries_card.industry_agriculture   { background-color: #D1ECF3; }
.industries_card.industry_automotive    { background-color: #F0F0F0; }
.industries_card.industry_insurance     { background-color: #E9FAE4; }

/* ---- About ---- */
.vision_icon_mission {
    color: #6366f1;
    font-size: 18px;
}

.vision_icon_vision {
    color: #22c55e;
    font-size: 18px;
}

/* ---- Contact: "Request a Proposal" form ---- */
/* Labels were 16px/500 in pure black — too heavy above the inputs */
.cdf_label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: #334155 !important;
    margin-bottom: 7px;
}

.cdf_input,
.cdf_input::placeholder {
    font-size: var(--fs-2xs);
}

.cdf_input::placeholder {
    color: #94a3b8;
}

/* The budget <select> showed its text in solid black while the other fields
   showed grey placeholders, so it read as larger. While nothing is chosen the
   select is :invalid — grey it to match, then darken once a real option is picked. */
select.cdf_input {
    color: #94a3b8;
    height: 40px;
    padding: 8px 32px 8px 8px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

select.cdf_input:valid {
    color: #0f172a;
}

select.cdf_input option {
    font-size: var(--fs-2xs);
    color: #0f172a;
}

.cdf_input:focus {
    border-color: #066FB6 !important;
    box-shadow: 0 0 0 3px rgba(6, 111, 182, 0.12) !important;
}

.add_wrap .cdf_attach_icon {
    color: #ffffff;
    font-size: 19px;
    line-height: 0;
}

.cdf_attach_text {
    color: #000;
}

.regional_contact_card.regional_card_blue  { background: linear-gradient(180deg, #EFF7FF 0%, #BCDCFF 100%); }
.regional_contact_card.regional_card_pink  { background: linear-gradient(180deg, #FFF6F9 0%, #FFE0EB 100%); }
.regional_contact_card.regional_card_peach { background: linear-gradient(180deg, #FFEBE6 0%, #ABD9F2 100%); }
.regional_contact_card.regional_card_sand  { background: linear-gradient(180deg, #FFF5E6 0%, #F2D2AB 100%); }
.regional_contact_card.regional_card_mint  { background: linear-gradient(180deg, #E6FFF5 0%, #ABF2D6 100%); }
.regional_contact_card.regional_card_lime  { background: linear-gradient(180deg, #F6FFE6 0%, #F2DFAB 100%); }

/* ---- Services page ---- */
.text_highlight,
.common_Heading h2 .text_highlight {
    color: #0071A0;
}

.text_orange {
    color: #fd7e14;
}

.trending_detail_box.trending_bg_mint     { background: #BAFFE3; }
.trending_detail_box.trending_bg_pink     { background: #FFCADD; }
.trending_detail_box.trending_bg_lavender { background: #D8D2FF; }
.trending_detail_box.trending_bg_amber    { background: #FFEDBC; }

.pds_icon_purple { color: #6c5ce7; }
.pds_icon_red    { color: #ff4757; }
.pds_icon_orange { color: #ffa502; }
.pds_icon_green  { color: #2ed573; }

.web_factor_box.web_factor_pink     { background: #FCE8EF; }
.web_factor_box.web_factor_mint     { background: #E6FFF5; }
.web_factor_box.web_factor_cream    { background: #FFF1CC; }
.web_factor_box.web_factor_lavender { background: #EAE7FD; }
.web_factor_box.web_factor_rose     { background: #FFE1E2; }

/* Design-tool tiles: one class sets the tile border and the icon colour */
.tools_bs_brand_icon i {
    color: var(--brand-color, #333333);
}

.tools_bs_brand.brand_adobe_xd    { border-color: rgba(255, 0, 0, 0.3);     --brand-color: #FF0000; }
.tools_bs_brand.brand_illustrator { border-color: rgba(255, 154, 0, 0.3);   --brand-color: #FF9A00; }
.tools_bs_brand.brand_photoshop   { border-color: rgba(49, 168, 255, 0.3);  --brand-color: #31A8FF; }
.tools_bs_brand.brand_cyan        { border-color: rgba(0, 210, 255, 0.3);   --brand-color: #00D2FF; }
.tools_bs_brand.brand_figma       { border-color: rgba(242, 78, 30, 0.3);   --brand-color: #F24E1E; }
.tools_bs_brand.brand_sketch      { border-color: rgba(253, 179, 0, 0.3);   --brand-color: #FDB300; }
.tools_bs_brand.brand_invision    { border-color: rgba(255, 51, 102, 0.3);  --brand-color: #FF3366; }
.tools_bs_brand.brand_vscode      { border-color: rgba(0, 118, 168, 0.3);   --brand-color: #0076a8; }
.tools_bs_brand.brand_github      { border-color: rgba(24, 23, 23, 0.3);    --brand-color: #181717; }
.tools_bs_brand.brand_docker      { border-color: rgba(36, 150, 237, 0.3);  --brand-color: #2496ED; }
.tools_bs_brand.brand_postman     { border-color: rgba(77, 77, 77, 0.3);    --brand-color: #4D4D4D; }

@media (max-width: 767.98px) {
    .common_Heading p.heading_para_narrow {
        max-width: 100%;
    }
}


/* 9. Services mega menu
   Markup keeps .dropdown-menu / .services-menu / .dropdown-item, so Bootstrap's
   toggle, keyboard navigation and the existing hover-to-open rule still work.
   #header prefix: the old nav rules style every `li a` with !important.
   ========================================================================== */
#header .mega_menu {
    --mm-accent: #066FB6;
    --mm-ink: #0f172a;
    --mm-muted: #64748b;
}

#header .mega_menu .mega_menu_heading {
    font-family: var(--th-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 8px;
    padding: 0 12px;
    text-align: left;
}

#header .mega_menu a.mega_menu_item {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border-bottom: 0 !important;
    background: transparent !important;
    color: var(--mm-ink) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    transform: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#header .mega_menu a.mega_menu_item:hover,
#header .mega_menu a.mega_menu_item:focus-visible {
    background: #f1f7fd !important;
    color: var(--mm-accent) !important;
}

#header .mega_menu a.mega_menu_item.current {
    background: #eaf4fd !important;
    color: var(--mm-accent) !important;
}

#header .mega_menu .mega_menu_icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(6, 111, 182, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

#header .mega_menu .mega_menu_icon i {
    width: auto;
    margin: 0;
    font-size: 1rem !important;
    color: var(--mm-accent) !important;
    transition: color 0.2s ease;
}

#header .mega_menu a.mega_menu_item:hover .mega_menu_icon,
#header .mega_menu a.mega_menu_item.current .mega_menu_icon {
    background: var(--mm-accent);
}

#header .mega_menu a.mega_menu_item:hover .mega_menu_icon i,
#header .mega_menu a.mega_menu_item.current .mega_menu_icon i {
    color: #ffffff !important;
}

#header .mega_menu .mega_menu_text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-top: 1px;
}

#header .mega_menu .mega_menu_title {
    font-family: var(--th-font-heading);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: inherit;
    letter-spacing: -0.005em;
}

#header .mega_menu .mega_menu_desc {
    font-size: var(--fs-2xs);
    font-weight: 400;
    line-height: 1.45;
    color: var(--mm-muted);
}

/* ---- Desktop panel (≥1200) ---- */
@media (min-width: 1200px) {

    /* Anchor the panel to the header row instead of the narrow <li> */
    #header .main_header_wrap {
        position: relative;
    }

    #header .services-dropdown {
        position: static;
    }

    #header .services-menu.mega_menu {
        position: absolute;
        top: calc(100% - 2px);
        left: 0;
        right: 0;
        width: min(1240px, calc(100vw - 40px));
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible;
        background: #ffffff;
        border: 1px solid #e6edf5;
        border-radius: 20px !important;
        backdrop-filter: none;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.04);
        animation: megaMenuIn 0.22s ease-out;
        z-index: 1050;
    }

    /* Invisible bridge over the gap between the link and the panel so hover is kept */
    #header .services-menu.mega_menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -22px;
        height: 22px;
    }

    #header .mega_menu_inner {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) 260px;
        gap: 8px;
        padding: 24px;
    }

    #header .mega_menu_group {
        padding: 6px 4px 4px;
    }

    #header .mega_menu_group + .mega_menu_group {
        border-left: 1px solid #eef2f7;
        padding-left: 12px;
    }

    #header .mega_menu_promo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 8px;
        padding: 26px 24px;
        border-radius: 16px;
        background: linear-gradient(160deg, #0b86d0 0%, #066FB6 45%, #0d4a7c 100%);
        color: #ffffff;
    }

    #header .mega_menu_promo_tag {
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.75);
        margin-bottom: 10px;
    }

    #header .mega_menu_promo_title {
        font-family: var(--th-font-heading);
        font-size: 1.3125rem;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.015em;
        color: #ffffff;
        margin-bottom: 8px;
    }

    #header .mega_menu_promo_text {
        font-size: var(--fs-xs);
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 18px;
    }

    #header .mega_menu a.mega_menu_promo_link {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        width: auto;
        padding: 0 !important;
        margin-bottom: 16px;
        background: transparent !important;
        border: 0 !important;
        color: #ffffff !important;
        font-size: var(--fs-xs) !important;
        font-weight: 600;
        transform: none !important;
    }

    #header .mega_menu a.mega_menu_promo_link i {
        width: auto;
        font-size: 0.8125rem !important;
        color: #ffffff !important;
        transition: transform 0.2s ease;
    }

    #header .mega_menu a.mega_menu_promo_link:hover i {
        transform: translateX(4px);
    }

    #header .mega_menu a.mega_menu_promo_cta {
        display: inline-flex !important;
        justify-content: center;
        width: 100%;
        margin-top: auto;
        padding: 12px 18px !important;
        border-radius: 50px !important;
        border: 0 !important;
        background: #ffffff !important;
        color: #066FB6 !important;
        font-size: var(--fs-xs) !important;
        font-weight: 700;
        transform: none !important;
        transition: box-shadow 0.2s ease;
    }

    #header .mega_menu a.mega_menu_promo_cta:hover {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    }

    @keyframes megaMenuIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ---- Mobile / tablet sidebar (≤1199) ---- */
@media (max-width: 1199.98px) {

    /* Sidebar content can exceed the screen once the menu is expanded — let it scroll */
    .navbar_menu_wrapper {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 40px !important;
    }

    #header .services-menu.mega_menu {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 10px !important;
        margin: 6px 0 10px !important;
    }

    #header .mega_menu_group + .mega_menu_group {
        margin-top: 12px;
    }

    #header .mega_menu .mega_menu_heading {
        padding: 0 8px;
        margin-bottom: 4px;
    }

    #header .mega_menu a.mega_menu_item {
        align-items: center;
        padding: 8px !important;
    }

    #header .mega_menu .mega_menu_icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    #header .mega_menu .mega_menu_icon i {
        font-size: 0.875rem !important;
    }

    #header .mega_menu .mega_menu_title {
        font-size: var(--fs-xs);
    }

    #header .mega_menu .mega_menu_desc,
    #header .mega_menu_promo_tag,
    #header .mega_menu_promo_title,
    #header .mega_menu_promo_text {
        display: none;
    }

    #header .mega_menu_promo {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #e2e8f0;
    }

    #header .mega_menu a.mega_menu_promo_link,
    #header .mega_menu a.mega_menu_promo_cta {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        font-size: var(--fs-2xs) !important;
        font-weight: 600;
        transform: none !important;
    }

    #header .mega_menu a.mega_menu_promo_link {
        background: #ffffff !important;
        color: #066FB6 !important;
        border: 1px solid #dbe7f3 !important;
    }

    #header .mega_menu a.mega_menu_promo_link i {
        width: auto;
        font-size: 0.75rem !important;
        color: #066FB6 !important;
    }

    #header .mega_menu a.mega_menu_promo_cta {
        border: 0 !important;
        background: linear-gradient(90deg, #12B3E9 0%, #066FB6 100%) !important;
        color: #ffffff !important;
    }
}


/* 10. Header "Get in Touch" button + popup
   ========================================================================== */
.main_header_wrap .navbar_menu_wrapper .header_cta_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 50px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    white-space: nowrap;
    color: #ffffff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.main_header_wrap .navbar_menu_wrapper .header_cta_btn:hover {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(6, 111, 182, 0.3) !important;
}

.main_header_wrap .navbar_menu_wrapper .header_cta_btn i {
    font-size: 0.875rem;
}

@media (max-width: 1199.98px) {
    .main_header_wrap .navbar_menu_wrapper .header_cta_btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        margin-top: 8px;
    }
}

/* Footer contact items are links now (tap to call / email) */
.footer_connection_section ul li a {
    display: inline-flex;
    align-items: center;
    color: inherit;
    transition: color 0.2s ease;
}

.footer_connection_section ul li a:hover {
    color: #ffffff;
}

/* ---- Popup ---- */
.get_in_touch_modal .modal-dialog {
    max-width: 540px;
    padding: 0 12px;
}

.get_in_touch_modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 24px;
    padding: 34px 30px 28px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
}

.get_in_touch_modal .git_close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 12px;
    height: 12px;
    padding: 10px;
    border-radius: 50%;
    background-color: #f1f5f9;
    background-size: 10px;
    opacity: 1;
}

.get_in_touch_modal .git_close:hover {
    background-color: #e2e8f0;
}

.git_header {
    margin-bottom: 22px;
    padding-right: 32px;
}

.git_tag {
    display: inline-block;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: #0f4c81;
    background: rgba(56, 189, 248, 0.12);
    padding: 7px 14px;
    border-radius: 30px;
    margin-bottom: 12px;
}

.git_title {
    font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin-bottom: 8px;
}

.git_text {
    font-size: var(--fs-xs);
    line-height: 1.65;
    color: var(--th-text-muted);
    margin-bottom: 0;
}

.git_actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.git_action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.git_action:hover {
    color: #0f172a;
    border-color: rgba(6, 111, 182, 0.35);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.git_action_icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 111, 182, 0.1);
    color: #066FB6;
    font-size: 1rem;
}

.git_action_body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.git_action_label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.git_action_value {
    font-size: var(--fs-2xs);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Call Now is the primary action */
.git_action.git_action_call {
    border-color: transparent;
    background: linear-gradient(135deg, #12B3E9 0%, #066FB6 100%);
    color: #ffffff;
}

.git_action.git_action_call:hover {
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(6, 111, 182, 0.3);
}

.git_action_call .git_action_icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.git_action_call .git_action_label {
    color: rgba(255, 255, 255, 0.8);
}

.git_divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.git_divider::before,
.git_divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.git_label {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
}

.git_optional {
    font-weight: 400;
    color: #94a3b8;
}

.git_input.form-control {
    font-size: 1rem;
    padding: 10px 14px;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    background: #f8fafc;
    color: #0f172a;
}

.git_input.form-control:focus {
    background: #ffffff;
    border-color: #066FB6;
    box-shadow: 0 0 0 3px rgba(6, 111, 182, 0.12);
}

textarea.git_input.form-control {
    resize: none;
}

.git_submit {
    width: 100%;
    margin-top: 18px;
    padding: 13px 20px;
    border: 0;
    border-radius: 50px;
    background: linear-gradient(90deg, #12B3E9 0%, #066FB6 100%);
    color: #ffffff;
    font-family: var(--th-font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.git_submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(6, 111, 182, 0.28);
}

.git_submit:disabled {
    opacity: 0.7;
    transform: none;
}

.git_response .alert {
    margin: 14px 0 0;
    font-size: var(--fs-2xs);
    border-radius: 12px;
}

@media (max-width: 479.98px) {
    .get_in_touch_modal .modal-content {
        padding: 28px 20px 22px;
        border-radius: 20px;
    }

    .git_actions {
        grid-template-columns: 1fr;
    }
}


/* 11. Header "Careers" dropdown (Careers + Internships)
   #header prefix: the old nav rules style every `li a` with !important.
   ========================================================================== */
.careers-dropdown > .nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
}

.careers-dropdown > .dropdown-toggle::after {
    margin-top: 0;
    margin-left: 5px;
}

#header .careers-menu {
    min-width: 236px !important;
    padding: 8px !important;
}

#header .careers-menu a.dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    border-bottom: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: var(--fs-xs) !important;
    font-weight: 600;
    white-space: nowrap;
    transform: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#header .careers-menu a.dropdown-item i {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 111, 182, 0.08);
    color: #066FB6 !important;
    font-size: 0.875rem !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#header .careers-menu a.dropdown-item:hover,
#header .careers-menu a.dropdown-item:focus-visible,
#header .careers-menu a.dropdown-item.current {
    background: #f1f7fd !important;
    color: #066FB6 !important;
}

#header .careers-menu a.dropdown-item:hover i,
#header .careers-menu a.dropdown-item.current i {
    background: #066FB6;
    color: #ffffff !important;
}

/* Desktop: opens on hover like Our Services */
@media (min-width: 1200px) {
    #header .careers-dropdown {
        position: relative;
    }

    #header .careers-dropdown:hover > .careers-menu {
        display: block;
    }

    #header .careers-menu {
        top: calc(100% + 10px) !important;
        left: 0 !important;
        margin: 0 !important;
        overflow: visible;
        background: #ffffff;
        border: 1px solid #e6edf5;
        border-radius: 16px !important;
        box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
        animation: megaMenuIn 0.2s ease-out;
    }

    /* Bridge the gap between the link and the menu so hover is kept */
    #header .careers-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -14px;
        height: 14px;
    }
}

/* Mobile / tablet sidebar */
@media (max-width: 1199.98px) {
    #header .careers-menu {
        position: static !important;
        width: 100%;
        margin: 6px 0 10px !important;
        padding: 8px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        box-shadow: none !important;
        backdrop-filter: none;
    }

    #header .careers-menu a.dropdown-item i {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }
}


/* 12. Accessibility & contrast corrections
   ========================================================================== */

/* Skip link — hidden until keyboard-focused */
.skip_to_content {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 2000;
    padding: 12px 22px;
    border-radius: 0 0 12px 12px;
    background: #066FB6;
    color: #ffffff !important;
    font-family: var(--th-font-body);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip_to_content:focus {
    top: 0;
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

#main-content:focus {
    outline: none;
}

/* The hero call-to-action was #ff3b30: white text on it measured 3.55:1,
   below the 4.5:1 minimum. This red keeps the same character at 4.8:1. */
.hero_primary_btn {
    background: #d92d20;
}

.hero_primary_btn:hover {
    background: #b91c1c;
}

/* Footer contact rows were 17px tall — below a comfortable tap target */
.footer_connection_section ul li a {
    padding: 6px 0;
    min-height: 32px;
}

/* "Explore Solution" links on the service pages */
.app_solution_content a {
    padding: 6px 0;
    min-height: 32px;
}

@media (max-width: 767.98px) {

    /* Give small inline links room to be tapped reliably */
    .cp_card_link,
    .cp_breadcrumb a,
    .privacy-box a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }
}


/* 13. Service pages — card typography & animated process flow
   ========================================================================== */

/* ---- Card titles were 24px, which crowded the cards and pushed the
        supporting copy out of balance. These sit a step down and read
        as card headings rather than section headings. ---- */
.dev_service_front h3 {
    font-size: 1.1875rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.dev_service_hover h4 {
    font-size: 1.0625rem;
    line-height: 1.35;
}

.dev_service_hover p {
    font-size: var(--fs-2xs);
    line-height: 1.65;
}

.app_solution_content h3 {
    font-size: 1.1875rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.app_solution_content p {
    font-size: var(--fs-2xs);
    line-height: 1.7;
}

.why_choose_us_point h3 {
    font-size: 1.0625rem;
}

.process_step_title {
    font-size: 1.0625rem;
}

.tech_card h3 {
    font-size: var(--fs-2xs);
}

/* icons were sized for the larger titles */
.dev_service_front_icon,
.dev_service_hover_icon {
    width: 42px;
    height: 42px;
    font-size: 17px;
    margin-bottom: 14px;
}

.app_solution_icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    font-size: 21px;
}

@media (max-width: 1199.98px) {
    .dev_service_front h3,
    .app_solution_content h3 {
        font-size: 1.125rem;
    }
}

@media (max-width: 767.98px) {
    .dev_service_front h3,
    .app_solution_content h3 {
        font-size: 1.0625rem;
    }

    .dev_service_hover h4,
    .why_choose_us_point h3 {
        font-size: 1rem;
    }
}

/* ---- Animated process flow ---- */
.process_flow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 320px;
}

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

/* The canvas is decorative; this list carries the same stages for screen
   readers and for anyone browsing with images or scripts disabled. */
.process_flow_list {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1199.98px) {
    .process_flow {
        min-height: 300px;
    }
}

/* The left-hand accordion already lists every stage on small screens,
   so the diagram would only repeat it. */
@media (max-width: 767.98px) {
    .app_process_right {
        display: none;
    }
}


/* 14. Service pages — readable cards, visible surfaces, lighter hero
   ========================================================================== */

/* ---- "Our Expertise" cards ----
   The description was hidden behind a hover state, which left a tall, mostly
   empty card and made the content unreachable on touch devices. The card now
   shows icon, title and description together, at its natural height. */
.dev_service_front,
.dev_service_hover {
    min-height: 0;
    padding: 24px 22px;
    justify-content: flex-start;
}

.dev_service_card_inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* the hover panel becomes part of the normal flow, contributing only its text */
.dev_service_hover {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    padding-top: 0;
    flex: 1;
}

.dev_service_hover .dev_service_hover_icon,
.dev_service_hover h4 {
    display: none;
}

.dev_service_hover p {
    color: #64748b;
    font-size: var(--fs-2xs);
    line-height: 1.7;
}

/* the front no longer hides on hover */
.dev_service_card:hover .dev_service_front,
.dev_service_card.active_card .dev_service_front {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.dev_service_card:hover .dev_service_hover,
.dev_service_card.active_card .dev_service_hover {
    transform: none;
}

.dev_service_front {
    padding-bottom: 12px;
}

.dev_service_front h3 {
    margin-bottom: 0;
}

/* the little arrow badge was only meaningful as a "hover me" cue */
.dev_service_plus {
    display: none;
}

/* ---- White cards were nearly invisible on the near-white sections.
        Slightly deeper section tints plus a real edge and shadow. ---- */
.development_services_section {
    background: #eef3f9;
}

.app_solutions_section {
    background: linear-gradient(180deg, #eef3f9 0%, #e6eef7 100%);
}

.why_choose_us_section {
    background: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%);
}

.app_process_section {
    background: linear-gradient(180deg, #eef3f9 0%, #ffffff 100%);
}

.dev_service_card_inner,
.app_solution_card,
.tech_card,
.why_choose_us_point,
.app_process_accordion,
.frequently_asked_wrapper .frequently_asked_box {
    border-color: #dbe5f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.06);
}

.why_choose_us_point {
    background: #ffffff;
}

.dev_service_card:hover .dev_service_card_inner,
.tech_card:hover,
.why_choose_us_point:hover {
    border-color: rgba(15, 76, 129, 0.28);
    box-shadow: 0 6px 12px rgba(15, 23, 42, 0.06), 0 20px 40px rgba(15, 23, 42, 0.10);
}

/* ---- Hero: the artwork was almost entirely hidden behind the overlay.
        Lighter on the right so the illustration reads, still dark enough
        under the headline to keep white text well above 4.5:1. ---- */
.service_hero_overlay {
    background:
        linear-gradient(90deg, rgba(4, 11, 28, 0.92) 0%, rgba(4, 11, 28, 0.66) 40%, rgba(4, 11, 28, 0.58) 100%),
        linear-gradient(180deg, rgba(4, 11, 28, 0.30) 0%, rgba(4, 11, 28, 0) 35%, rgba(4, 11, 28, 0.35) 100%);
}

/* the form card sits on the darkest part, so the hero needs no extra padding */
@media (max-width: 991.98px) {
    .service_hero_overlay {
        background:
            linear-gradient(180deg, rgba(4, 11, 28, 0.86) 0%, rgba(4, 11, 28, 0.72) 45%, rgba(4, 11, 28, 0.86) 100%);
    }
}

/* ---- "Why Businesses Choose TetraHobbit" illustration ----
   The CSS phone mockups were replaced by one animated SVG, so the fixed
   620px column height (and the empty space it created) is no longer needed. */
.why_choose_us_visual {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.why_choose_us_art {
    width: 100%;
    max-width: 560px;
    height: auto;
}

/* ---- About page hero illustration ---- */
.main_dashboard_img .about_hero_art {
    width: 100%;
    height: 100%;
    max-height: 380px;
    object-fit: contain;
}

/* An SVG loaded through <img> does not reliably inherit the visitor's
   reduced-motion preference, so swap in a still version of the same artwork. */
@media (prefers-reduced-motion: reduce) {
    .why_choose_us_art {
        content: url("../images/services/why-choose-static.svg");
    }

    .about_hero_art {
        content: url("../images/pages/about-hero-static.svg");
    }
}

@media (max-width: 991.98px) {
    .why_choose_us_visual {
        min-height: 0;
        margin-bottom: 8px;
    }

    .why_choose_us_art {
        max-width: 440px;
    }
}


/* 15. WhatsApp chat in the top bar (right side, before the social icons)
   ========================================================================== */

/* the shared <li> rules make every item a 30px circle — this one is a pill */
.announcement_icons li.announcement_wa {
    width: auto;
    height: auto;
    border-radius: 50px;
    background-color: transparent;
    backdrop-filter: none;
    border: 0;
    margin-right: 4px;
    transition: none;
}

.announcement_icons li.announcement_wa:hover {
    background-color: transparent;
    transform: none;
    box-shadow: none;
}

.announcement_wa a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    /* deep enough that the white label clears 4.5:1, still clearly WhatsApp */
    background: #0e7c5a;
    color: #ffffff !important;
    font-family: var(--th-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.announcement_wa a:hover,
.announcement_wa a:focus-visible {
    background: #12a06f;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
}

.announcement_wa i {
    font-size: 1rem;
    line-height: 1;
}

/* Tablets and below: keep the icon, drop the words so the bar stays tidy */
@media (max-width: 991.98px) {
    .announcement_wa a {
        padding: 7px;
        gap: 0;
    }

    .announcement_wa a span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .announcement_wa i {
        font-size: 1.0625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .announcement_wa a {
        transition: none;
    }

    .announcement_wa a:hover {
        transform: none;
    }
}


/* ---- Portfolio showcase intro column ----
   This column used Bootstrap's justify-content-between with exactly two
   children, so whatever height the left project card had over it opened as a
   hole between the intro paragraph and the "Technology Used" / "Key Features"
   tabs — and the taller the card rendered, the wider the hole. Top-align the
   content and state the spacing once, so it stays constant at every width. */
.portfolio_intro_col {
    justify-content: flex-start;
    row-gap: 28px;
}

@media (max-width: 767.98px) {
    .portfolio_intro_col {
        row-gap: 20px;
    }
}


/* ---- About > Our Process: cards that grow with their text ----
   The cards were a fixed 180x98px box with a speech-bubble image behind it, so
   any copy longer than two short lines ran out of the bubble. From tablet up
   the bubble is now drawn in CSS and sized by its content: each column is a
   two-row grid (above / below the line) whose rows share the tallest card's
   height, so the line stays centred and nothing is clipped at any width.
   Below 768px the existing stacked layout in about.css is left as it is. */
@media (min-width: 768px) {
    .timeline-wrapper {
        padding: 12px 0;
    }

    .central-line {
        top: 50%;
    }

    .timeline-section .row > [class*="col-"] {
        display: flex;
    }

    .timeline-node {
        flex: 1;
        height: auto;
        display: grid;
        grid-template-rows: 1fr 1fr;
        justify-items: center;
        padding: 0 8px;
    }

    .timeline-node .content-card,
    .timeline-node .upward-content-card {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: 250px;
        height: auto;
        margin: 0;
        padding: 16px 18px;
        background: #ffffff;
        border: 1.5px solid #d5dbe3;
        border-radius: 16px;
        overflow-wrap: break-word;
    }

    .node-top .content-card {
        grid-row: 1;
        align-self: end;
        margin-bottom: 34px;
    }

    .node-bottom .content-card {
        grid-row: 2;
        align-self: start;
        margin-top: 34px;
    }

    /* pointer towards the line, replacing the one baked into the old image */
    .timeline-node .content-card::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 16px;
        height: 16px;
        background: #ffffff;
        border: 1.5px solid #d5dbe3;
        transform: translateX(-50%) rotate(45deg);
    }

    .node-top .content-card::after {
        bottom: -9px;
        border-top-color: transparent;
        border-left-color: transparent;
    }

    .node-bottom .content-card::after {
        top: -9px;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

    .timeline-node .content-card h5 {
        margin-bottom: 6px;
    }
}

/* tablet columns are narrow: give the text the room instead of the padding */
@media (min-width: 768px) and (max-width: 991.98px) {
    .timeline-node {
        padding: 0 4px;
    }

    .timeline-node .content-card,
    .timeline-node .upward-content-card {
        padding: 14px 10px;
    }
}


/* ---- Services mega menu: second row of groups ----
   Five groups in three columns: "Development" runs the full height of the
   first column, the other four pair up in columns two and three, and the
   promo panel spans both rows. The panel scrolls inside itself on short
   screens instead of running off the bottom. */
@media (min-width: 1200px) {
    #header .mega_menu_inner {
        grid-template-rows: auto 1fr;
        max-height: calc(100vh - 124px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 20px;
    }

    #header .mega_menu_inner > .mega_menu_group:first-child {
        grid-row: 1 / span 2;
    }

    #header .mega_menu_inner > .mega_menu_group_row2 {
        grid-row: 2;
        position: relative;
        padding-top: 14px;
    }

    #header .mega_menu_inner > .mega_menu_group_row2::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 12px;
        right: 4px;
        height: 1px;
        background: #eef2f7;
    }

    #header .mega_menu_inner > .mega_menu_promo {
        grid-column: 4;
        grid-row: 1 / span 2;
    }

    /* 19 entries: slightly tighter rows keep the panel on one laptop screen */
    #header .mega_menu a.mega_menu_item {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
}

/* Short laptop screens (e.g. 1366x768): keep each description to one line and
   tighten the rows so all 19 entries show without scrolling the panel. */
@media (min-width: 1200px) and (max-height: 820px) {
    #header .mega_menu_inner {
        padding: 16px 20px;
    }

    #header .mega_menu .mega_menu_desc {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #header .mega_menu .mega_menu_title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #header .mega_menu a.mega_menu_item {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    #header .mega_menu .mega_menu_heading {
        margin-bottom: 4px;
    }
}


/* ---- Services mega menu: motion & finish ----
   Everything here runs when the panel opens (a hidden panel does not animate,
   so each open starts from the beginning) and is off for reduced motion.

   --i is the row's position in its column; it staggers the entrance and the
   icon wipe so a column fills from the top. */
#header .mega_menu .mega_menu_item:nth-child(2) { --i: 0; }
#header .mega_menu .mega_menu_item:nth-child(3) { --i: 1; }
#header .mega_menu .mega_menu_item:nth-child(4) { --i: 2; }
#header .mega_menu .mega_menu_item:nth-child(5) { --i: 3; }
#header .mega_menu .mega_menu_item:nth-child(6) { --i: 4; }
#header .mega_menu .mega_menu_item:nth-child(7) { --i: 5; }
#header .mega_menu .mega_menu_group_row2 .mega_menu_item:nth-child(2) { --i: 3; }
#header .mega_menu .mega_menu_group_row2 .mega_menu_item:nth-child(3) { --i: 4; }
#header .mega_menu .mega_menu_group_row2 .mega_menu_item:nth-child(4) { --i: 5; }
#header .mega_menu .mega_menu_group_row2 .mega_menu_item:nth-child(5) { --i: 6; }

/* One line per entry: the copy is written to fit, the ellipsis is only a
   safety net for unusually narrow columns. */
#header .mega_menu a.mega_menu_item {
    align-items: center;
}

#header .mega_menu .mega_menu_desc {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* titles are never cut: a long one wraps onto a second line instead */
#header .mega_menu .mega_menu_title {
    display: block;
    white-space: normal;
    overflow: visible;
}

/* short laptop screens: smaller tiles so all 19 rows fit without scrolling */
@media (min-width: 1200px) and (max-height: 820px) {
    #header .mega_menu .mega_menu_icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
    }

    #header .mega_menu a.mega_menu_item {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    #header .mega_menu .mega_menu_heading {
        margin-bottom: 6px;
    }
}

/* Group headings: darker label with a short accent rule that draws in */
#header .mega_menu .mega_menu_heading {
    color: #475569;
    margin-bottom: 10px;
}

#header .mega_menu .mega_menu_heading::after {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    margin-top: 7px;
    border-radius: 2px;
    background: linear-gradient(90deg, #12B3E9, #066FB6);
    transform-origin: left;
    animation: megaRuleX 0.55s 0.15s ease-out both;
}

/* Icon: a faint glyph is always there; the solid one wipes across it, holds,
   wipes off and repeats, so a tile is never empty. */
#header .mega_menu .mega_menu_icon i {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 33.33%, #000 33.33% 66.66%, rgba(0, 0, 0, 0.3) 66.66% 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 33.33%, #000 33.33% 66.66%, rgba(0, 0, 0, 0.3) 66.66% 100%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    animation: megaIconBuild 6s ease-in-out infinite both;
    animation-delay: calc(var(--i, 0) * 160ms + 200ms);
}

@keyframes megaIconBuild {
    0%        { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    16%, 76%  { -webkit-mask-position: 50% 0; mask-position: 50% 0; }
    92%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}

/* the entry you point at, and the current page's, stay solid and still */
#header .mega_menu a.mega_menu_item:hover .mega_menu_icon i,
#header .mega_menu a.mega_menu_item:focus-visible .mega_menu_icon i,
#header .mega_menu a.mega_menu_item.current .mega_menu_icon i {
    -webkit-mask-image: none;
    mask-image: none;
    animation: none;
}

@keyframes megaRuleX {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes megaRuleY {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes megaPulseX {
    from { background-position: -90px 0; }
    to   { background-position: calc(100% + 90px) 0; }
}

@keyframes megaPulseY {
    from { background-position: 0 -90px; }
    to   { background-position: 0 calc(100% + 90px); }
}

@keyframes megaItemIn {
    from { opacity: 0; translate: 0 8px; }
    to   { opacity: 1; translate: 0 0; }
}

@media (min-width: 1200px) {

    /* rows rise into place one after another */
    #header .mega_menu a.mega_menu_item {
        animation: megaItemIn 0.38s ease-out both;
        animation-delay: calc(var(--i, 0) * 45ms + 60ms);
    }

    #header .mega_menu a.mega_menu_item:hover .mega_menu_icon,
    #header .mega_menu a.mega_menu_item:focus-visible .mega_menu_icon {
        box-shadow: 0 6px 14px rgba(6, 111, 182, 0.28);
    }

    /* accent line along the top edge of the panel */
    #header .services-menu.mega_menu::after {
        content: "";
        position: absolute;
        top: -1px;
        left: 28px;
        right: 28px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg, #12B3E9, #066FB6 55%, #C750DC);
        transform-origin: left;
        animation: megaRuleX 0.7s ease-out both;
        pointer-events: none;
    }

    /* Divider lines. Each one draws itself when the panel opens, then a soft
       highlight keeps travelling along it. */
    #header .mega_menu_group + .mega_menu_group {
        position: relative;
        border-left-color: transparent;
    }

    #header .mega_menu_group + .mega_menu_group::after {
        content: "";
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 0;
        width: 1px;
        background: #e3eaf2 linear-gradient(180deg, rgba(18, 179, 233, 0), #12B3E9, rgba(18, 179, 233, 0)) no-repeat;
        background-size: 100% 90px;
        transform-origin: top;
        animation: megaRuleY 0.7s 0.1s ease-out both, megaPulseY 3.8s 0.8s linear infinite both;
    }

    #header .mega_menu_inner > .mega_menu_group_row2::before {
        background: #e3eaf2 linear-gradient(90deg, rgba(18, 179, 233, 0), #12B3E9, rgba(18, 179, 233, 0)) no-repeat;
        background-size: 90px 100%;
        transform-origin: left;
        animation: megaRuleX 0.7s 0.3s ease-out both, megaPulseX 3.8s 1.4s linear infinite both;
    }

    /* the lower groups' vertical line picks up after the upper one */
    #header .mega_menu_inner > .mega_menu_group_row2::after {
        animation-delay: 0.45s, 2.7s;
    }
}

@media (prefers-reduced-motion: reduce) {
    #header .mega_menu .mega_menu_icon i {
        -webkit-mask-image: none;
        mask-image: none;
        animation: none;
    }

    #header .mega_menu a.mega_menu_item,
    #header .mega_menu .mega_menu_heading::after,
    #header .services-menu.mega_menu::after,
    #header .mega_menu_group + .mega_menu_group::after,
    #header .mega_menu_inner > .mega_menu_group_row2::before {
        animation: none;
    }
}


/* ---- Services mega menu: hover box spacing ----
   The highlight had 7px above/below but 12px at the sides, and consecutive
   rows had no gap, so two highlights (hover + current page, or moving between
   rows) ran into each other. Padding is now the same on all four sides and
   rows are separated by a small gap. */
#header .mega_menu a.mega_menu_item {
    padding: 8px !important;
    margin: 0 0 4px;
}

#header .mega_menu a.mega_menu_item:last-child {
    margin-bottom: 0;
}

/* keep the group label in line with the icons */
#header .mega_menu .mega_menu_heading {
    padding: 0 8px;
}

@media (min-width: 1200px) and (max-height: 820px) {
    #header .mega_menu a.mega_menu_item {
        padding: 6px !important;
        margin-bottom: 3px;
    }

    #header .mega_menu .mega_menu_heading {
        padding: 0 6px;
    }
}

/* short laptop screens: the row gaps cost height, so the tiles and the panel's
   own padding give a little back and all 19 rows still fit without scrolling */
@media (min-width: 1200px) and (max-height: 820px) {
    #header .mega_menu_inner {
        padding: 10px 18px;
    }

    #header .mega_menu a.mega_menu_item {
        padding: 5px !important;
        margin-bottom: 2px;
    }

    #header .mega_menu .mega_menu_icon {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    #header .mega_menu .mega_menu_heading {
        padding: 0 5px;
        margin-bottom: 4px;
    }

    #header .mega_menu .mega_menu_heading::after {
        margin-top: 5px;
    }

    #header .mega_menu_inner > .mega_menu_group_row2 {
        padding-top: 10px;
    }

    #header .mega_menu_promo {
        padding: 18px 20px;
    }
}


/* ---- Service pages > Trusted Collaboration: colourful logo cards ----
   The logos were shown small and greyed out on plain white tiles. Each card
   now takes an accent from its own brand (--tb / --tb2): gradient outline,
   tinted surface and a soft glow, with the logo in full colour.
   The logo files carry a baked-in orange frame, so the image is clipped
   to keep only the mark itself. Cards are matched by logo
   file because the looping slider reorders its slides. */
.trusted_brands_section .trusted_brand_item {
    --tb: #066FB6;
    --tb2: #12B3E9;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    height: 124px;
    min-height: 0;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 20px;
    background:
        linear-gradient(155deg, #ffffff 30%, color-mix(in srgb, var(--tb) 13%, #ffffff) 100%) padding-box,
        linear-gradient(135deg, var(--tb2), var(--tb)) border-box;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--tb) 16%, transparent);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.trusted_brands_section .trusted_brand_item:has(img[src*="client-1"]) { --tb: #15803d; --tb2: #84cc16; }
.trusted_brands_section .trusted_brand_item:has(img[src*="client-2"]) { --tb: #475569; --tb2: #94a3b8; }
.trusted_brands_section .trusted_brand_item:has(img[src*="client-3"]) { --tb: #ea580c; --tb2: #fbbf24; }
.trusted_brands_section .trusted_brand_item:has(img[src*="client-4"]) { --tb: #7e22ce; --tb2: #e879f9; }
.trusted_brands_section .trusted_brand_item:has(img[src*="client-5"]) { --tb: #0f766e; --tb2: #22d3ee; }
.trusted_brands_section .trusted_brand_item:has(img[src*="client-6"]) { --tb: #1e3a8a; --tb2: #60a5fa; }

/* soft pool of the brand colour in the corner */
.trusted_brands_section .trusted_brand_item::before {
    content: "";
    position: absolute;
    top: -46px;
    right: -46px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tb2) 42%, transparent), transparent);
    z-index: -1;
    transition: transform 0.45s ease;
}

/* No accent bar: a strip along the base was cut off by the rounded corners
   and read as a torn edge. The outline stays one clean, even line all round. */
.trusted_brands_section .trusted_brand_item::after {
    content: none;
}

.trusted_brands_section .trusted_brand_item img {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
    filter: none;
    mix-blend-mode: multiply;
    /* cuts the baked-in frame off the artwork, leaving the mark with clear space */
    clip-path: inset(13% 10% round 26px);
    transform: scale(1.18);
    transition: transform 0.4s ease;
}

.trusted_brands_section .trusted_brand_item:hover {
    transform: translateY(-6px);
    background:
        linear-gradient(155deg, #ffffff 20%, color-mix(in srgb, var(--tb) 18%, #ffffff) 100%) padding-box,
        linear-gradient(135deg, var(--tb2), var(--tb)) border-box;
    box-shadow: 0 20px 36px color-mix(in srgb, var(--tb) 28%, transparent);
}

.trusted_brands_section .trusted_brand_item:hover::before {
    transform: scale(1.5);
}

.trusted_brands_section .trusted_brand_item:hover img {
    filter: none;
    transform: scale(1.26);
}

/* room for the lift and the glow inside the slider's clipping box */
.trusted_brands_section .trustedBrandsSlider {
    padding: 16px 6px 34px;
}

@media (max-width: 575.98px) {
    .trusted_brands_section .trusted_brand_item {
        height: 104px;
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trusted_brands_section .trusted_brand_item,
    .trusted_brands_section .trusted_brand_item::before,
    .trusted_brands_section .trusted_brand_item img {
        transition: none;
    }

    .trusted_brands_section .trusted_brand_item:hover {
        transform: none;
    }
}


/* Trusted Collaboration heading: same scale as every other section heading on
   the service pages (it was set a step smaller, as a secondary heading). */
.trusted_brands_section .trusted_brands_heading h2 {
    font-size: var(--fs-h2);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}


/* ---- "Why Businesses Choose TetraHobbit": one illustration per service ----
   Each service page now shows artwork about that service (code editor, API
   hub, database, pipeline and so on) instead of one shared picture. The new
   files are landscape, so the slot is a little wider. Reduced-motion users get
   the still version of the matching illustration. */
.why_choose_us_art[class*="why_art_"] {
    max-width: 620px;
}

@media (max-width: 991.98px) {
    .why_choose_us_art[class*="why_art_"] {
        max-width: 480px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .why_choose_us_art.why_art_software { content: url("../images/services/why-software-static.svg"); }
    .why_choose_us_art.why_art_custom { content: url("../images/services/why-custom-static.svg"); }
    .why_choose_us_art.why_art_web { content: url("../images/services/why-web-static.svg"); }
    .why_choose_us_art.why_art_app { content: url("../images/services/why-app-static.svg"); }
    .why_choose_us_art.why_art_mvp { content: url("../images/services/why-mvp-static.svg"); }
    .why_choose_us_art.why_art_api { content: url("../images/services/why-api-static.svg"); }
    .why_choose_us_art.why_art_database { content: url("../images/services/why-database-static.svg"); }
    .why_choose_us_art.why_art_devops { content: url("../images/services/why-devops-static.svg"); }
    .why_choose_us_art.why_art_data { content: url("../images/services/why-data-static.svg"); }
    .why_choose_us_art.why_art_transform { content: url("../images/services/why-transform-static.svg"); }
}


/* ---- Service pages > Our Expertise: icons that build, clear and build again ----
   Same treatment as the Services menu icons. A faint copy of the glyph is
   always there; the solid one wipes across it from the left, holds, wipes off
   and the loop repeats, so a tile never looks empty. Cards start one after
   another across the grid. The card you point at keeps a solid, still icon. */
.dev_service_front_icon i {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 33.33%, #000 33.33% 66.66%, rgba(0, 0, 0, 0.28) 66.66% 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 33.33%, #000 33.33% 66.66%, rgba(0, 0, 0, 0.28) 66.66% 100%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    animation: expertiseIconBuild 6s ease-in-out infinite both;
    animation-delay: calc(var(--ei, 0) * 280ms);
}

@keyframes expertiseIconBuild {
    0%        { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    18%, 74%  { -webkit-mask-position: 50% 0; mask-position: 50% 0; }
    92%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}

.row > [class*="col-"]:nth-child(2) .dev_service_front_icon { --ei: 1; }
.row > [class*="col-"]:nth-child(3) .dev_service_front_icon { --ei: 2; }
.row > [class*="col-"]:nth-child(4) .dev_service_front_icon { --ei: 3; }
.row > [class*="col-"]:nth-child(5) .dev_service_front_icon { --ei: 4; }
.row > [class*="col-"]:nth-child(6) .dev_service_front_icon { --ei: 5; }
.row > [class*="col-"]:nth-child(7) .dev_service_front_icon { --ei: 6; }
.row > [class*="col-"]:nth-child(8) .dev_service_front_icon { --ei: 7; }
.row > [class*="col-"]:nth-child(9) .dev_service_front_icon { --ei: 8; }

.dev_service_card:hover .dev_service_front_icon i,
.dev_service_card:focus-within .dev_service_front_icon i {
    -webkit-mask-image: none;
    mask-image: none;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .dev_service_front_icon i {
        -webkit-mask-image: none;
        mask-image: none;
        animation: none;
    }
}


/* tech-logo-colours:start */
.tl_adobe-xd { --tc: #334155; }
.tl_airflow { --tc: #017cee; }
.tl_android { --tc: #A4C439; }
.tl_angular { --tc: #FFFFFF; }
.tl_ansible { --tc: #334155; }
.tl_apigee { --tc: #c2410c; }
.tl_argo-cd { --tc: #ef7b4d; }
.tl_aurora { --tc: #527fff; }
.tl_automation-anywhere { --tc: #c2410c; }
.tl_aws { --tc: #f90; }
.tl_aws-security { --tc: #f90; }
.tl_azure { --tc: #0089D6; }
.tl_azure-gcp { --tc: #0284c7; }
.tl_bigcommerce { --tc: #334155; }
.tl_bigquery { --tc: #669df6; }
.tl_bitbucket { --tc: #205081; }
.tl_bootstrap { --tc: #712cf9; }
.tl_canva { --tc: #00C4CC; }
.tl_cassandra { --tc: #1185b0; }
.tl_chef { --tc: #f09820; }
.tl_chrome-devtools { --tc: #ce4e4e; }
.tl_circleci { --tc: #343434; }
.tl_cloud { --tc: #0284c7; }
.tl_cloudformation { --tc: #f90; }
.tl_collibra { --tc: #b45309; }
.tl_compass { --tc: #4FAA41; }
.tl_cosmos-db { --tc: #59B3D8; }
.tl_couchdb { --tc: #e42528; }
.tl_css3 { --tc: #3d8fc6; }
.tl_databricks { --tc: #ff3621; }
.tl_datadog { --tc: #632ca6; }
.tl_dbeaver { --tc: #382923; }
.tl_dbt { --tc: #ff694b; }
.tl_digitalocean { --tc: #0080FF; }
.tl_django { --tc: #092e20; }
.tl_docker { --tc: #019bc6; }
.tl_dotnet { --tc: #1384c8; }
.tl_dynamodb { --tc: #527fff; }
.tl_ecs-eks { --tc: #ff9900; }
.tl_elasticsearch { --tc: #00bfb3; }
.tl_elementor { --tc: #92003b; }
.tl_elk-stack { --tc: #005571; }
.tl_entra-id { --tc: #0089D6; }
.tl_express { --tc: #444; }
.tl_fastapi { --tc: #009688; }
.tl_figma { --tc: #f24e1e; }
.tl_firebase { --tc: #ffa000; }
.tl_firestore { --tc: #ffa000; }
.tl_framer { --tc: #0055ff; }
.tl_ga4 { --tc: #e37400; }
.tl_ghost { --tc: #334155; }
.tl_git { --tc: #f34f29; }
.tl_git-and-ci-cd { --tc: #f34f29; }
.tl_github { --tc: #334155; }
.tl_github-actions { --tc: #2088FF; }
.tl_gitlab { --tc: #E24329; }
.tl_gitlab-ci { --tc: #E24329; }
.tl_google-cloud { --tc: #557ebf; }
.tl_grafana { --tc: #f7a525; }
.tl_graphql { --tc: #e434aa; }
.tl_hashicorp-vault { --tc: #ffd814; }
.tl_helm { --tc: #0F1689; }
.tl_heroku { --tc: #6762a6; }
.tl_hotjar { --tc: #ff3c00; }
.tl_html5 { --tc: #e54d26; }
.tl_https-tls { --tc: #15803d; }
.tl_ibm-cloud { --tc: #1261fe; }
.tl_illustrator { --tc: #faa625; }
.tl_insomnia { --tc: #4000bf; }
.tl_ios { --tc: #334155; }
.tl_java { --tc: #EA2D2E; }
.tl_javascript { --tc: #f0db4f; }
.tl_jenkins { --tc: #F0D6B7; }
.tl_jest { --tc: #99425b; }
.tl_jira { --tc: #2684ff; }
.tl_json { --tc: #505050; }
.tl_jupyter { --tc: #F37726; }
.tl_jwt { --tc: #334155; }
.tl_kafka { --tc: #334155; }
.tl_keras { --tc: #d00000; }
.tl_kong { --tc: #003459; }
.tl_kubernetes { --tc: #326ce5; }
.tl_langchain { --tc: #1c3c3c; }
.tl_laravel { --tc: #f0513f; }
.tl_lighthouse { --tc: #f44b21; }
.tl_linode { --tc: #0096d6; }
.tl_looker { --tc: #4285f4; }
.tl_magento { --tc: #f26322; }
.tl_mariadb { --tc: #003545; }
.tl_memcached { --tc: #0f766e; }
.tl_metabase { --tc: #509ee3; }
.tl_mocha { --tc: #8d6748; }
.tl_mongodb { --tc: #4FAA41; }
.tl_mulesoft { --tc: #00a0df; }
.tl_mysql { --tc: #00618a; }
.tl_n8n { --tc: #ea4b71; }
.tl_netlify { --tc: #05BDBA; }
.tl_new-relic { --tc: #1ce783; }
.tl_next-js { --tc: #000; }
.tl_node-js { --tc: #5fa04e; }
.tl_nuxt { --tc: #00c48d; }
.tl_oauth-2-0 { --tc: #334155; }
.tl_oauth-jwt { --tc: #334155; }
.tl_okta { --tc: #0f82c2; }
.tl_opa { --tc: #4338ca; }
.tl_openapi { --tc: #91d400; }
.tl_opencart { --tc: #0369a1; }
.tl_opencv { --tc: #128dff; }
.tl_opensearch { --tc: #005eb8; }
.tl_openshift { --tc: #e93442; }
.tl_pgadmin { --tc: #336791; }
.tl_photoshop { --tc: #334155; }
.tl_php { --tc: #777bb3; }
.tl_podman { --tc: #892ca0; }
.tl_postgresql { --tc: #336791; }
.tl_posthog { --tc: #334155; }
.tl_postman { --tc: #f37036; }
.tl_power-automate { --tc: #0066ff; }
.tl_power-bi { --tc: #f2c811; }
.tl_prestashop { --tc: #df0067; }
.tl_prometheus { --tc: #e75225; }
.tl_pulumi { --tc: #f6bf29; }
.tl_puppet { --tc: #ffae1a; }
.tl_pytest { --tc: #009fe3; }
.tl_python { --tc: #ffd845; }
.tl_pytorch { --tc: #EE4C2C; }
.tl_rabbitmq { --tc: #ff6600; }
.tl_rate-limiting { --tc: #c2410c; }
.tl_rbac { --tc: #6d28d9; }
.tl_react { --tc: #61dafb; }
.tl_react-js { --tc: #61dafb; }
.tl_react-native { --tc: #61dafb; }
.tl_redis { --tc: #d82c20; }
.tl_redis-cache { --tc: #d82c20; }
.tl_render { --tc: #46e3b7; }
.tl_rest { --tc: #0f766e; }
.tl_rest-apis { --tc: #0f766e; }
.tl_rest-graphql { --tc: #0f766e; }
.tl_salesforce { --tc: #00a1e0; }
.tl_scikit-learn { --tc: #f89939; }
.tl_sentry { --tc: #362d59; }
.tl_servicenow { --tc: #15803d; }
.tl_shopify { --tc: #7ab55c; }
.tl_snowflake { --tc: #29b5e8; }
.tl_snyk { --tc: #4c4a73; }
.tl_sonarqube { --tc: #549dd0; }
.tl_spark { --tc: #e15919; }
.tl_spring-boot { --tc: #5FB832; }
.tl_sql { --tc: #1d4ed8; }
.tl_sql-server { --tc: #ee352c; }
.tl_sqlite { --tc: #0f80cc; }
.tl_squarespace { --tc: #334155; }
.tl_stripe { --tc: #008cdd; }
.tl_supabase { --tc: #3ecf8e; }
.tl_superset { --tc: #20a6c9; }
.tl_swagger { --tc: #85ea2d; }
.tl_synapse { --tc: #0089D6; }
.tl_tableau { --tc: #e97627; }
.tl_tailwind { --tc: #38bdf8; }
.tl_teamcity { --tc: #334155; }
.tl_tensorflow { --tc: #ff6f00; }
.tl_terraform { --tc: #5c4ee5; }
.tl_trivy { --tc: #1904da; }
.tl_typescript { --tc: #007acc; }
.tl_uipath { --tc: #fa4616; }
.tl_vercel { --tc: #000; }
.tl_vps-dedicated { --tc: #334155; }
.tl_vs-code { --tc: #3C99D4; }
.tl_vue-js { --tc: #41B883; }
.tl_webflow { --tc: #146ef5; }
.tl_webhooks { --tc: #be185d; }
.tl_windows { --tc: #0078d4; }
.tl_wix { --tc: #0c6efc; }
.tl_woocommerce { --tc: #7f54b3; }
.tl_wordpress { --tc: #494949; }
.tl_workbench { --tc: #00618a; }
.tl_zapier { --tc: #ff4f00; }
/* tech-logo-colours:end */


/* ---- Service pages > Tools & Technologies: brand-coloured cards ----
   Every card carries its tool's brand colour in --tc (rules generated between
   the tech-logo-colours markers above). The logo sits on a white tile inside
   a soft tint of that colour, so all cards share one treatment whether the
   artwork is a multi-colour logo, a single-colour mark or a plain icon. */
/* fallback colour only; :where() keeps it weaker than the per-tool .tl_* rules */
:where(.tech_card) {
    --tc: #066FB6;
}

.tech_card[class*="tl_"] {
    position: relative;
    overflow: hidden;
    padding: 24px 14px 20px;
    border: 1px solid color-mix(in srgb, var(--tc) 16%, #e6edf5);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 7%, #ffffff) 0%, #ffffff 62%);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tc) 9%, transparent);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tech_card[class*="tl_"] .tech_icon_box {
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--tc) 18%, #e6edf5);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--tc) 14%, transparent);
    color: var(--tc);
    font-size: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech_card[class*="tl_"] .tech_icon_box img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.tech_card[class*="tl_"] h3 {
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
}

.tech_card[class*="tl_"]:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--tc) 45%, #e6edf5);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--tc) 20%, transparent);
}

.tech_card[class*="tl_"]:hover .tech_icon_box {
    transform: scale(1.08);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--tc) 24%, transparent);
}

@media (max-width: 575.98px) {
    .tech_card[class*="tl_"] {
        padding: 18px 10px 16px;
    }

    .tech_card[class*="tl_"] .tech_icon_box {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        font-size: 26px;
    }

    .tech_card[class*="tl_"] .tech_icon_box img {
        width: 34px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tech_card[class*="tl_"],
    .tech_card[class*="tl_"] .tech_icon_box {
        transition: none;
    }

    .tech_card[class*="tl_"]:hover,
    .tech_card[class*="tl_"]:hover .tech_icon_box {
        transform: none;
    }
}


/* ---- Service pages > Industry Solutions: selectable cards ----
   One card is highlighted at a time (service.js moves .featured_solution_card
   on click). The pointer cursor signals the whole card can be clicked. */
.app_solution_card {
    cursor: pointer;
}


/* ---- Service pages > Our Expertise: border that draws itself on hover ----
   A gradient line starts at the top of the card and runs clockwise all the
   way round while the pointer is over it, then unwinds when the pointer
   leaves. --exp-a is the angle drawn so far; registering it lets it animate
   (a browser without @property shows the full border at once instead). */
@property --exp-a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* The line is drawn exactly on the card's own edge (same box, same corner
   radius), so it reads as the card's border changing colour, not as a frame
   around it. One solid colour keeps it an even, crisp line all the way round. */
.dev_service_card::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 16px;
    background: conic-gradient(from 0deg, #066FB6 var(--exp-a), transparent var(--exp-a));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    transition: --exp-a 0.9s ease-in-out;
}

.dev_service_card:hover::after,
.dev_service_card:focus-within::after {
    --exp-a: 360deg;
}

.dev_service_card:hover .dev_service_card_inner {
    box-shadow: 0 18px 36px rgba(6, 111, 182, 0.14);
}

@media (prefers-reduced-motion: reduce) {
    .dev_service_card::after {
        transition: none;
    }
}

/* The card lifts 3px on hover (and the highlighted card is lifted all the
   time). The line has to travel with it, or it ends up 3px below the edge it
   is meant to be drawn on. */
.dev_service_card::after {
    transition: --exp-a 0.9s ease-in-out, transform 0.35s ease;
}

.dev_service_card:hover::after,
.dev_service_card.active_card::after {
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .dev_service_card::after {
        transition: none;
    }
}


/* ---- Desktop nav: current page shown by colour and an underline ----
   The current page used to be a filled blue button. It is now the brand colour
   with a line under the label; hovering another link draws the same line from
   the left. The line is a background layer, so it does not clash with the
   dropdown caret (which uses ::after). */
@media (min-width: 1200px) {
    #header .main_header_wrap .navbar_menu_wrapper li a.nav-link {
        background-color: transparent;
        background-image: linear-gradient(#066FB6, #066FB6);
        background-repeat: no-repeat;
        background-position: left 10px bottom 2px;
        background-size: 0 2px;
        border-radius: 0;
        transition: color 0.25s ease, background-size 0.3s ease;
    }

    #header .main_header_wrap .navbar_menu_wrapper li a.nav-link.active,
    #header .main_header_wrap .navbar_menu_wrapper li a.nav-link:hover,
    #header .main_header_wrap .navbar_menu_wrapper li a.nav-link:focus-visible,
    #header .main_header_wrap .navbar_menu_wrapper li a.nav-link.show {
        background-color: transparent;
        background-size: calc(100% - 20px) 2px;
        color: #066FB6 !important;
    }

    #header .main_header_wrap .navbar_menu_wrapper li a.nav-link.active {
        font-weight: 600;
    }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
    #header .main_header_wrap .navbar_menu_wrapper li a.nav-link {
        transition: none;
    }
}


/* ---- Service pages: coloured hero instead of a background image ----
   The picture behind the hero is gone. The section is a deep brand gradient
   with two soft light pools and a faint dot grid, all drawn in CSS, so there
   is nothing to load and the white text sits on a known colour everywhere
   (the lightest stop, #0a5fa0, still gives white text about 6.6:1). */
.service_hero_section {
    background: #0b2545;
}

.service_hero_bg {
    background:
        radial-gradient(rgba(255, 255, 255, 0.07) 1.2px, transparent 1.2px) 0 0 / 28px 28px,
        linear-gradient(120deg, #071a36 0%, #0b2f5c 46%, #0a5fa0 100%);
}

.service_hero_overlay {
    background:
        radial-gradient(42% 60% at 86% 18%, rgba(18, 179, 233, 0.22), rgba(18, 179, 233, 0) 70%),
        radial-gradient(38% 55% at 8% 96%, rgba(199, 80, 220, 0.20), rgba(199, 80, 220, 0) 70%);
    animation: svcHeroGlow 14s ease-in-out infinite alternate;
}

@keyframes svcHeroGlow {
    from { opacity: 0.75; transform: scale(1); }
    to   { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 991.98px) {
    .service_hero_overlay {
        background:
            radial-gradient(70% 40% at 90% 6%, rgba(18, 179, 233, 0.20), rgba(18, 179, 233, 0) 70%),
            radial-gradient(70% 40% at 6% 98%, rgba(199, 80, 220, 0.18), rgba(199, 80, 220, 0) 70%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .service_hero_overlay {
        animation: none;
    }
}


/* ---- Services mega menu: illustration in the promo panel ----
   Fills the empty space between the "Explore all services" link and the
   button with a route that draws itself (Idea, Plan, Build, Launch) - the
   answer to "Not sure where to start?". The image is a flexible item with no
   height of its own, so it takes exactly the space that is spare, whatever
   the screen height, and never makes the panel taller. Hidden in the mobile
   sidebar, and when less than a sliver of space is left. */
#header .mega_menu_promo_art {
    display: none;
}

@media (min-width: 1200px) and (min-height: 540px) {
    #header .mega_menu_promo_art {
        display: block;
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        height: auto;
        margin: 12px 0 14px;
        object-fit: contain;
        object-position: center;
    }

    #header .mega_menu .mega_menu_promo_art + a.mega_menu_promo_cta {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #header .mega_menu_promo_art {
        content: url("../images/pages/menu-route-static.svg");
    }
}


/* ---- Homepage > Our Services carousel: animated drawing in each slide ----
   The coloured band at the top of every slide carries a small white drawing
   for that slide's topic, which builds, holds, clears and builds again. It
   sits above the band's gradient and below the round icon badge. Reduced-
   motion users get the finished drawing. */
.mini-card .mini_art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .mini_art_1 { content: url("../images/home/svc-1-static.svg"); }
    .mini_art_2 { content: url("../images/home/svc-2-static.svg"); }
    .mini_art_3 { content: url("../images/home/svc-3-static.svg"); }
    .mini_art_4 { content: url("../images/home/svc-4-static.svg"); }
    .mini_art_5 { content: url("../images/home/svc-5-static.svg"); }
    .mini_art_6 { content: url("../images/home/svc-6-static.svg"); }
    .mini_art_7 { content: url("../images/home/svc-7-static.svg"); }
    .mini_art_8 { content: url("../images/home/svc-8-static.svg"); }
    .mini_art_9 { content: url("../images/home/svc-9-static.svg"); }
    .mini_art_10 { content: url("../images/home/svc-10-static.svg"); }
    .mini_art_11 { content: url("../images/home/svc-11-static.svg"); }
    .mini_art_12 { content: url("../images/home/svc-12-static.svg"); }
    .mini_art_13 { content: url("../images/home/svc-13-static.svg"); }
    .mini_art_14 { content: url("../images/home/svc-14-static.svg"); }
    .mini_art_15 { content: url("../images/home/svc-15-static.svg"); }
    .mini_art_16 { content: url("../images/home/svc-16-static.svg"); }
}


/* ---- Homepage > "We Create New Solution...": animated illustration ----
   The picture is now an SVG that animates on its own (lights, data moving
   along the links, clouds drifting, uploads), so the old whole-image bobbing
   is switched off for it. Reduced-motion users get the still version. */
.solution_Faq_img img.solution_faq_art {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .solution_faq_art {
        content: url("../images/home/solution-infra-static.svg");
    }
}


/* ---- Homepage > Tech Capabilities: icons that draw themselves ----
   These are line icons (single strokes on a 24px grid, round ends), inline
   as SVG so each stroke can be drawn: the lines trace in, the finished icon
   holds, the lines retract, and it is drawn again. Icons run one after
   another - the six categories top to bottom, then the technologies of the
   open tab (a hidden tab does not animate, so opening one starts its icons
   from the beginning). Pointing at a card or category shows its icon whole. */
.line_icon {
    display: inline-flex;
    font-style: normal;
    line-height: 1;
}

.line_icon svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.tech_capabilities-tab .line_icon svg {
    width: 22px;
    height: 22px;
}

.tech_capabilities_img .line_icon {
    color: #0d6efd;
}

.line_icon svg > * {
    stroke-dasharray: 1;
    animation: lineIconDraw 6s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
    animation-delay: calc(var(--ti, 0) * 240ms);
}

@keyframes lineIconDraw {
    0%        { stroke-dashoffset: 1; }
    34%, 82%  { stroke-dashoffset: 0; }
    96%, 100% { stroke-dashoffset: 1; }
}

.tech_capabilities-tab:nth-child(2) { --ti: 1; }
.tech_capabilities-tab:nth-child(3) { --ti: 2; }
.tech_capabilities-tab:nth-child(4) { --ti: 3; }
.tech_capabilities-tab:nth-child(5) { --ti: 4; }
.tech_capabilities-tab:nth-child(6) { --ti: 5; }

.tech_capabilities-content [class*="col-"]:nth-child(2) { --ti: 1; }
.tech_capabilities-content [class*="col-"]:nth-child(3) { --ti: 2; }
.tech_capabilities-content [class*="col-"]:nth-child(4) { --ti: 3; }
.tech_capabilities-content [class*="col-"]:nth-child(5) { --ti: 4; }
.tech_capabilities-content [class*="col-"]:nth-child(6) { --ti: 5; }
.tech_capabilities-content [class*="col-"]:nth-child(7) { --ti: 6; }
.tech_capabilities-content [class*="col-"]:nth-child(8) { --ti: 7; }

.tech_capabilities-tab:hover .line_icon svg > *,
.tech_capabilities-card:hover .line_icon svg > * {
    animation: none;
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .line_icon svg > * {
        animation: none;
        stroke-dashoffset: 0;
    }
}


/* ---- service.html: one type scale for the whole page ----
   The page mixed sizes that belong to no scale (33.6px, 17.6px, 14.4px), ran
   every intro paragraph at 19px, and had card titles anywhere from 16px to
   34px. Everything now sits on five steps:
     40  section headings (unchanged, same as the rest of the site)
     24  the open process card        20  card and panel titles
     17  section intros               16 / 15  body copy and labels
   Scoped by section id, so no other page is affected. */
#dashboard.service_dashboard_wrapper .dashboard_heading > p,
#product_design .common_Heading p,
#seamless_product_design .common_Heading p,
#technology_experts .common_Heading p,
.Product_Design_Services_section .Product_Design_Services_desc {
    /* !important only because the site-wide intro rule it replaces uses it */
    font-size: 1.0625rem !important;
    line-height: 1.7;
    color: #475569;
}

#product_design .common_Heading p,
#seamless_product_design .common_Heading p {
    max-width: 860px;
}

/* process cards: the open card's title, and the upright labels on the others */
#service_cards_container .Our_Result_driven_title {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

#service_cards_container .Our_Result_driven_vertical_label {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0;
}

#service_cards_container .Our_Result_driven_desc {
    font-size: 0.9375rem;
    line-height: 1.65;
}

#service_cards_container .Our_Result_driven_btn {
    font-size: 0.875rem;
}

/* industry cards */
.Product_Design_Services_section .Product_Design_Services_card_title {
    font-size: 1.25rem;
    line-height: 1.3;
}

/* tools */
#seamless_product_design .tools_bs_brand_name {
    font-size: 0.9375rem;
}

#seamless_product_design .tools_bs_nav_text {
    font-size: 1rem;
}

/* why web development */
#web_dev p {
    font-size: 1rem;
    line-height: 1.7;
}

#web_dev h3 {
    font-size: 1.25rem;
    line-height: 1.3;
}

#web_dev .web_dev_feature p,
#web_dev li p,
#web_dev [class*="factor"] p {
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* consultation block */
#technology_experts .common_Heading p:first-of-type {
    font-weight: 600;
    color: #0f172a;
}

#technology_experts .common_Heading p + p {
    font-size: 1rem !important;
    font-weight: 400;
}

#technology_experts input,
#technology_experts select,
#technology_experts textarea {
    font-size: 0.9375rem;
}

/* FAQ on this page */
body:has(#trending_details) #faq_container .common_Heading p {
    font-size: 1.0625rem !important;
    line-height: 1.7;
}

body:has(#trending_details) .frequently_asked_wrapper h5 {
    font-size: 1rem;
    line-height: 1.45;
}

@media (max-width: 575.98px) {
    #dashboard.service_dashboard_wrapper .dashboard_heading > p,
    #product_design .common_Heading p,
    #seamless_product_design .common_Heading p,
    #technology_experts .common_Heading p,
    .Product_Design_Services_section .Product_Design_Services_desc,
    body:has(#trending_details) #faq_container .common_Heading p {
        font-size: 1rem !important;
    }

    #service_cards_container .Our_Result_driven_title {
        font-size: 1.25rem;
    }
}

/* service.html: where the section heading is left-aligned, its intro text
   starts on the same left edge (the narrower paragraph was being centred,
   and the "suite includes" line was centred on purpose in the markup). */
#product_design .common_Heading.align-items-start p,
#seamless_product_design .common_Heading.align-items-start p {
    margin-left: 0;
    margin-right: auto;
    text-align: left !important;
}


/* ---- service.html > process cards: canvas scene ----
   process-cards.js draws a different animated scene in each card (radar,
   route, pen curve, code, lift-off). The canvas fills the card behind its
   text; a card that is closed shows nothing but its label. */
.Our_Result_driven_wrapper .Our_Result_driven_canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease 0.25s;
}

.Our_Result_driven_wrapper .Our_Result_driven_card.active .Our_Result_driven_canvas {
    opacity: 1;
}

.Our_Result_driven_wrapper .Our_Result_driven_content,
.Our_Result_driven_wrapper .Our_Result_driven_vertical_label {
    position: relative;
    z-index: 1;
}

/* keep the copy clear of the scene on the right of a wide card */
@media (min-width: 992px) {
    .Our_Result_driven_wrapper .Our_Result_driven_card.active .Our_Result_driven_desc {
        max-width: 56%;
    }
}


/* ---- FAQ and accordion text: one size everywhere ----
   The open item in the homepage accordion jumped to 20px while the closed
   ones stayed at 16px, and FAQ questions were 17px on most pages but 16px on
   one. Questions and accordion titles are now 16px site-wide (open or
   closed); answers stay at 15px. */
.custom-accordion .accordion_header_content h4,
.custom-accordion .accordion-button:not(.collapsed) .accordion_header_content h4 {
    font-size: 1rem !important;
    line-height: 1.4;
}

.custom-accordion .accordion_header_content p {
    font-size: 0.875rem;
    line-height: 1.5;
}

.frequently_asked_wrapper h5 {
    font-size: 1rem;
    line-height: 1.45;
}

.process_step_btn .process_step_title {
    font-size: 1rem;
}


/* mobile-sidebar:start */
/* ---- Mobile / tablet drawer (below 1200px only; desktop is untouched) ----
   The drawer has three parts: a header that stays put (logo and the close
   button), the menu, which is the only part that scrolls, and a footer that
   stays put (quick contact and the Get in Touch button). Header and footer are
   sticky inside the scrolling drawer, so they never move with the menu. */
@media (max-width: 1199.98px) {
    .navbar_menu_wrapper {
        left: 0;
        width: min(86vw, 340px);
        height: 100vh;
        height: 100dvh;
        padding: 0 !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-right: 0;
        border-radius: 0 22px 22px 0;
        box-shadow: 18px 0 50px rgba(15, 23, 42, 0.22);
        transform: translateX(-105%);
        transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.38s;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

    .navbar_menu_wrapper.active {
        left: 0;
        transform: translateX(0);
    }

    /* the close button lives in the drawer, so the page's hamburger steps back */
    .mobile_menu_toggle.active {
        visibility: hidden;
    }

    .navbar_overlay {
        background: rgba(8, 20, 40, 0.55);
    }

    /* ---- fixed header ---- */
    .navbar_menu_wrapper .sidebar_head {
        position: sticky;
        top: 0;
        z-index: 5;
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 16px 16px 14px 20px;
        background: rgba(255, 255, 255, 0.96);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid #eef2f7;
        list-style: none;
    }

    .navbar_menu_wrapper .sidebar_brand {
        display: inline-flex;
        padding: 0 !important;
        background: none !important;
    }

    .navbar_menu_wrapper .sidebar_brand img {
        width: 150px;
        height: auto;
    }

    /* Close button: a plain light tile with a crisp cross drawn from two lines.
       (#header ... is needed to drop the gradient pill that the header gives
       every button inside the menu.) */
    #header .navbar_menu_wrapper .sidebar_close {
        position: relative;
        flex: 0 0 40px;
        display: block;
        width: 40px;
        min-width: 0;
        height: 40px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: #f1f5f9;
        box-shadow: none;
        color: #334155;
        font-size: 0;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    #header .navbar_menu_wrapper .sidebar_close i {
        display: none;
    }

    #header .navbar_menu_wrapper .sidebar_close::before,
    #header .navbar_menu_wrapper .sidebar_close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 0.25s ease;
    }

    #header .navbar_menu_wrapper .sidebar_close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    #header .navbar_menu_wrapper .sidebar_close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    #header .navbar_menu_wrapper .sidebar_close:hover,
    #header .navbar_menu_wrapper .sidebar_close:active {
        background: #e2e8f0;
        color: #0f172a;
    }

    #header .navbar_menu_wrapper .sidebar_close:active::before {
        transform: translate(-50%, -50%) rotate(135deg);
    }

    #header .navbar_menu_wrapper .sidebar_close:active::after {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    #header .navbar_menu_wrapper .sidebar_close:focus-visible {
        outline: 2px solid #066FB6;
        outline-offset: 2px;
    }

    /* ---- menu ---- */
    .navbar_menu_wrapper > .nav-item,
    .navbar_menu_wrapper > .sidebar_label {
        flex: 0 0 auto;
    }

    .navbar_menu_wrapper > .nav-item {
        width: 100%;
        margin: 0 0 2px;
        padding: 0 12px;
    }

    .navbar_menu_wrapper .sidebar_label {
        width: 100%;
        margin: 18px 0 8px !important;
        padding: 0 24px;
        font-size: 0.6875rem;
        letter-spacing: 0.14em;
        color: #94a3b8;
    }

    .navbar_menu_wrapper .sidebar_head + .sidebar_label {
        margin-top: 16px !important;
    }

    #header .navbar_menu_wrapper .nav-link {
        position: relative;
        gap: 14px;
        min-height: 50px;
        padding: 7px 12px 7px 8px !important;
        border-radius: 14px;
        font-size: 0.9375rem;
        font-weight: 600;
        color: #1e293b !important;
        background: transparent;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* icon tile */
    #header .navbar_menu_wrapper .nav-link > i {
        flex: 0 0 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0 !important;
        border-radius: 11px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 0.9rem;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    #header .navbar_menu_wrapper .nav-link:hover,
    #header .navbar_menu_wrapper .nav-link.active,
    #header .navbar_menu_wrapper .nav-link.show {
        padding-left: 8px !important;
        background: #eef6fd;
        color: #066FB6 !important;
    }

    #header .navbar_menu_wrapper .nav-link.active > i,
    #header .navbar_menu_wrapper .nav-link.show > i {
        background: linear-gradient(135deg, #12B3E9, #066FB6);
        color: #ffffff;
        box-shadow: 0 6px 14px rgba(6, 111, 182, 0.28);
    }

    /* marker on the current page */
    #header .navbar_menu_wrapper .nav-link.active::before {
        content: "";
        position: absolute;
        left: -12px;
        top: 12px;
        bottom: 12px;
        width: 4px;
        border-radius: 0 4px 4px 0;
        background: #066FB6;
    }

    /* dropdown arrow sits at the right edge and turns when open */
    #header .navbar_menu_wrapper .nav-link.dropdown-toggle::after {
        margin-left: auto;
        border: 0;
        width: 9px;
        height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px);
        opacity: 0.6;
        transition: transform 0.25s ease;
    }

    #header .navbar_menu_wrapper .nav-link.dropdown-toggle.show::after {
        transform: rotate(225deg) translate(-2px, -2px);
    }

    #header .navbar_menu_wrapper .services-menu.mega_menu,
    #header .navbar_menu_wrapper .careers-dropdown .dropdown-menu {
        margin: 6px 0 8px !important;
        border-radius: 16px !important;
    }

    /* ---- fixed footer ---- */
    .navbar_menu_wrapper .sidebar_contact {
        flex: 0 0 auto;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
        margin-top: auto;
        padding: 18px 16px 4px;
        list-style: none;
    }

    #header .navbar_menu_wrapper .sidebar_contact a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 10px 4px !important;
        border: 1px solid #e6edf5;
        border-radius: 14px;
        background: #f8fafc;
        font-size: 0.75rem !important;
        font-weight: 600;
        color: #334155 !important;
    }

    #header .navbar_menu_wrapper .sidebar_contact a i {
        font-size: 1rem;
        color: #066FB6;
    }

    #header .navbar_menu_wrapper .sidebar_contact a:active {
        background: #eef6fd;
        border-color: #bfdcf3;
    }

    .navbar_menu_wrapper > .nav-item:last-child {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 0;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #ffffff 14px);
    }

    .navbar_menu_wrapper .header_cta_btn {
        width: 100%;
        min-height: 50px;
        justify-content: center;
        border-radius: 16px;
        font-size: 0.9375rem;
        box-shadow: 0 10px 22px rgba(6, 111, 182, 0.28);
    }
}

@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
    .navbar_menu_wrapper,
    #header .navbar_menu_wrapper .sidebar_close,
    #header .navbar_menu_wrapper .sidebar_close::before,
    #header .navbar_menu_wrapper .sidebar_close::after,
    #header .navbar_menu_wrapper .nav-link.dropdown-toggle::after {
        transition: none;
    }
}
/* mobile-sidebar:end */


/* hero-type:start */
/* ---- Home hero label: typing animation (every screen) ----
   script.js types the text into .tw_live over an invisible full copy
   (.tw_ghost) that keeps the label its full size, so nothing moves. Without
   JavaScript or with reduced motion the full label simply shows. */
.dashboard_heading .tw_type {
    position: relative;
    white-space: nowrap;
}

.dashboard_heading .tw_type > span {
    margin: 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    white-space: nowrap;
}

.dashboard_heading .tw_type .tw_live {
    display: none;
}

.dashboard_heading .tw_type.tw_on .tw_ghost {
    visibility: hidden;
}

.dashboard_heading .tw_type.tw_on .tw_live {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* thin caret: solid while typing, blinking while it waits */
.dashboard_heading .tw_type.tw_on .tw_live::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.15em;
    margin-left: 2px;
    vertical-align: -0.2em;
    border-radius: 1px;
    background: currentColor;
    animation: tw-caret 1s steps(1, end) infinite;
}

.dashboard_heading .tw_type.tw_busy .tw_live::after {
    animation: none;
    opacity: 1;
}

@keyframes tw-caret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
/* hero-type:end */

/* hero-art:start */
/* ---- Home hero cards: illustrations on every screen ----
   Each card used to be one flat picture with colour and drawing baked in.
   The colour is now a CSS gradient in the same hue and the drawing an inline
   SVG made for the service (index.html, .dc_art), with light looping motion
   on transform and opacity only. Reduced-motion settings stop the motion. */

main:not(#_) .dashboard_card_wrapper .dashboard_card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.45);
}

/* same hues as before, deepened where the white title needs contrast */
main:not(#_) .dashboard_card_wrapper .dashboard_card-1 { --dc-a: #f04848; --dc-b: #b3121a; --dc-ink: #dc2626; }
main:not(#_) .dashboard_card_wrapper .dashboard_card-2 { --dc-a: #e4b40c; --dc-b: #9a6a06; --dc-ink: #b7791f; }
main:not(#_) .dashboard_card_wrapper .dashboard_card-3 { --dc-a: #3cba5c; --dc-b: #1b7a3a; --dc-ink: #16a34a; }
main:not(#_) .dashboard_card_wrapper .dashboard_card-4 { --dc-a: #3a95f5; --dc-b: #1650c8; --dc-ink: #2563eb; }
main:not(#_) .dashboard_card_wrapper .dashboard_card-5 { --dc-a: #a548d6; --dc-b: #5f1a8c; --dc-ink: #9333ea; }
main:not(#_) .dashboard_card_wrapper .dashboard_card-6 { --dc-a: #f8822a; --dc-b: #c2410c; --dc-ink: #ea580c; }

main:not(#_) .dashboard_card_wrapper .dashboard_card[class*="dashboard_card-"] {
    background-image:
        radial-gradient(circle at 96% 112%, rgba(255, 255, 255, 0.16) 0 30%, transparent 30.5%),
        radial-gradient(circle at 62% -40%, rgba(255, 255, 255, 0.14) 0 34%, transparent 34.5%),
        linear-gradient(135deg, var(--dc-a) 0%, var(--dc-b) 100%) !important;
}

main:not(#_) .dashboard_card_wrapper .dashboard_card_content {
    position: relative;
    z-index: 2;
    width: 42% !important;
    margin-left: 24px !important;
}

main:not(#_) .dashboard_card_wrapper .dc_art {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 6px;
    height: calc(100% - 18px);
    max-width: 54%;
    aspect-ratio: 180 / 140;
    transform: translateY(-50%);
    color: var(--dc-ink);
    pointer-events: none;
}

.dc_svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dc_svg * {
    transform-box: fill-box;
    transform-origin: center;
}

.dc_shade {
    fill: #0f172a;
    opacity: 0.18;
}

.dc_label {
    font: 700 9.5px/1 var(--primary-font, system-ui, sans-serif);
    text-anchor: middle;
}

/* ---- motion: transform and opacity only ---- */
.dc_float   { animation: dc-float 4.2s ease-in-out infinite alternate; }
.dc_bob     { animation: dc-bob 3.2s ease-in-out infinite alternate; }
.dc_spin    { animation: dc-spin 9s linear infinite; }
.dc_spin_back { animation-direction: reverse; animation-duration: 6s; }
.dc_twinkle { animation: dc-twinkle 2.6s ease-in-out infinite; }
.dc_pop     { animation: dc-pop 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both; }
.dc_line    { transform-origin: left center; animation: dc-line 6s ease-in-out infinite both; }
.dc_type    { transform-origin: left center; animation: dc-type 7s steps(12, end) infinite both; }
.dc_bar     { transform-origin: center bottom; animation: dc-bar 5.5s cubic-bezier(0.22, 1, 0.36, 1) infinite both; }
.dc_draw    { stroke-dasharray: 1; animation: dc-draw 5.5s ease-in-out infinite both; }
.dc_caret   { animation: dc-blink 1s steps(1, end) infinite; }
.dc_cursor  { animation: dc-cursor 5s ease-in-out infinite; }
.dc_ripple  { opacity: 0; animation: dc-ripple 5s ease-out infinite; }
.dc_pulse   { animation: dc-pulse 2.4s ease-in-out infinite; }
.dc_swing   { transform-origin: 8% 50%; animation: dc-swing 3s ease-in-out infinite alternate; }
.dc_badge   { animation: dc-badge 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.dc_breathe { animation: dc-breathe 3.6s ease-in-out infinite alternate; }
.dc_tilt    { animation: dc-tilt 4.5s ease-in-out infinite alternate; }
.dc_pen     { animation: dc-pen 5.5s ease-in-out infinite; }

.dc_d1 { animation-delay: 0.15s; }
.dc_d2 { animation-delay: 0.45s; }
.dc_d3 { animation-delay: 0.75s; }
.dc_d4 { animation-delay: 1.05s; }
.dc_d5 { animation-delay: 1.35s; }
.dc_d6 { animation-delay: 1.65s; }

@keyframes dc-float   { from { transform: translateY(2px); } to { transform: translateY(-4px); } }
@keyframes dc-bob     { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes dc-spin    { to { transform: rotate(360deg); } }
@keyframes dc-twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes dc-pop     { 0% { opacity: 0; transform: scale(0.4); } 10%, 82% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(0.6); } }
@keyframes dc-line    { 0% { transform: scaleX(0); } 14%, 84% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes dc-type    { 0% { transform: scaleX(0); } 12%, 86% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes dc-bar     { 0% { transform: scaleY(0.12); } 18%, 82% { transform: scaleY(1); } 100% { transform: scaleY(0.12); } }
@keyframes dc-draw    { 0% { stroke-dashoffset: 1; opacity: 1; } 38%, 82% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dc-blink   { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes dc-cursor  { 0%, 12% { transform: translate(26px, 24px); } 40% { transform: translate(0, 0); } 46% { transform: translate(0, 0) scale(0.86); } 52%, 70% { transform: translate(0, 0) scale(1); } 100% { transform: translate(26px, 24px); } }
@keyframes dc-ripple  { 0%, 43% { opacity: 0; transform: scale(0.2); } 46% { opacity: 0.55; } 70%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes dc-pulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes dc-swing   { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes dc-badge   { 0%, 60%, 100% { transform: scale(1); } 68% { transform: scale(1.35); } 76% { transform: scale(0.95); } }
@keyframes dc-breathe { from { transform: scale(0.9); } to { transform: scale(1.06); } }
@keyframes dc-tilt    { from { transform: rotate(-8deg); } to { transform: rotate(8deg) translateY(-3px); } }
@keyframes dc-pen     { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -6px) rotate(-6deg); } }

@media (prefers-reduced-motion: reduce) {
    .dc_svg,
    .dc_svg * {
        animation: none !important;
    }

    .dc_draw {
        stroke-dashoffset: 0;
    }

    .dc_ripple {
        opacity: 0;
    }
}
/* hero-art:end */


/* mobile-polish:start */
/* ==========================================================================
   Mobile polish (phones, below 768px). Nothing here applies on desktop.
   Rules come from measuring every page at 320-600px (mobile-audit.js).
   ========================================================================== */
@media (max-width: 767.98px) {

    /* ---- 1. One side gutter everywhere ----
       Every section's content sat 22px from the edge except page heroes
       (12px) and the footer (50px). Both now use the same 22px. */
    .main_dashboard_wrapper > .container,
    .dashboard_wrapper > .container,
    .service_dashboard_wrapper > .container {
        padding-left: 22px;
        padding-right: 22px;
    }

    #footer .container {
        max-width: 100% !important;
        margin-left: 0;
        margin-right: 0;
        padding-left: 22px;
        padding-right: 22px;
    }

    /* ---- 2. A section heading and its text share one alignment ----
       On phones the heading had fallen back to the left while the paragraph
       under it stayed centred. Centred blocks are centred throughout; blocks
       marked as left-aligned are left-aligned throughout, badge included. */
    main .common_Heading:not(.align-items-start):not(.ct_heading_left) {
        align-items: center;
        text-align: center;
    }

    main .common_Heading:not(.align-items-start):not(.ct_heading_left) h2,
    main .common_Heading:not(.align-items-start):not(.ct_heading_left) p {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center !important;
    }

    main .common_Heading h2 {
        text-wrap: balance;
    }

    /* ---- 3. Vertical rhythm ----
       A few sections had 8px or nothing above them, so they ran into the
       section before; the footer had 128px. */
    #our_process_container,
    #product_design,
    #seamless_product_design,
    #transformative_experiences,
    #vision_and_mission,
    .Product_Design_Services_section {
        padding-top: 44px !important;
    }

    #our_process_container {
        padding-bottom: 12px !important;
    }

    /* the footer also padded itself 30px at the sides on top of its container */
    footer#footer.footer {
        margin-top: 48px;
        padding: 52px 0 32px !important;
    }

    /* ---- 4. Comfortable tap targets (text links styled as small buttons) ---- */
    .dashboard_heading button a,
    #our_Portfolio .portfolio_btn a,
    .transformative_experience_content a,
    #technology_experts .common_Heading + * a,
    .cp_panel_contact a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    .dashboard_heading button {
        min-height: 44px;
    }

    /* ---- 5. Inner-page hero: no dead space round the illustration ----
       The picture sat in a fixed 350px box, which left bands of empty space
       above and below it. */
    .main_dashboard_wrapper .main_dashboard_img {
        height: auto;
    }

    .main_dashboard_wrapper .main_dashboard_img img {
        width: 100%;
        height: auto;
        max-height: 300px;
        object-fit: contain;
    }

    /* ---- 6. About page ---- */
    /* Our Process: the line sits on the section gutter and the cards use the
       full width (they were inset 42px on the right only) */
    #our_process_container .timeline-section {
        padding: 0;
    }

    #our_process_container .timeline-wrapper {
        padding: 8px 0;
    }

    #our_process_container .timeline-node {
        padding: 12px 0 12px 44px;
    }

    #our_process_container .central-line {
        left: 8px;
    }

    #our_process_container .dot {
        left: 8px;
    }

    #our_process_container .content-card {
        max-width: none;
        min-height: 0;
        padding: 16px 18px;
    }

    /* ---- 7. Home: "Who's Using" slider ----
       The arrows sat on top of the card text. They move to the bottom of the
       card, side by side, and the card leaves room for them. */
    #who_Using .mySwiper1_card {
        padding-bottom: 76px;
    }

    #who_Using .swiper-button-prev,
    #who_Using .swiper-button-next {
        top: auto !important;
        bottom: 22px !important;
        margin-top: 0 !important;
        width: 40px;
        height: 40px;
    }

    #who_Using .swiper-button-prev {
        left: calc(50% - 48px) !important;
        right: auto !important;
    }

    #who_Using .swiper-button-next {
        right: calc(50% - 48px) !important;
        left: auto !important;
    }

    /* ---- 8. Home + About: industries as a two-column grid ----
       Fifteen full-width cards made a very long scroll. Two compact columns
       halve it; the text is kept. */
    /* the same 12px between the panel edge and the cards, and between cards,
       on every side */
    main:not(#_) .industries_card_wrapper {
        padding: 12px !important;
    }

    .industries_card_wrapper .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 0;
        margin-top: 0;
        row-gap: 12px;
    }

    .industries_card_wrapper .row > [class*="col-"] {
        width: 50%;
        margin-top: 0;
    }

    /* an odd last card takes the whole row instead of leaving a hole */
    .industries_card_wrapper .row > [class*="col-"]:last-child:nth-child(odd) {
        width: 100%;
    }

    /* content starts at the top of every card, so icons and titles line up
       across a row whatever the text length */
    .industries_card_wrapper .industries_card {
        height: 100%;
        min-height: 0;
        padding: 16px 12px;
        justify-content: flex-start;
    }

    .industries_card_wrapper .industries_card .card_img {
        width: 60px;
        height: 60px;
        min-width: 0;
        min-height: 0;
        margin-bottom: 10px;
    }

    .industries_card_wrapper .industries_card .card_img img {
        width: 40px !important;
        height: 40px !important;
        max-width: none;
    }

    /* About > Our Value slider: the text was capped narrower than its slide,
       so it sat off-centre */
    .vision_right_panel .swiper-slide p {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .industries_card_wrapper .industries_card h4 {
        font-size: 0.9375rem;
        margin-bottom: 6px;
    }

    .industries_card_wrapper .industries_card p {
        font-size: 0.8125rem;
        line-height: 1.45;
    }
}

/* ---- 9. FAQ on phones (every page that has one) ----
   The boxes sat inside up to three padded wrappers, which left the question
   about 150px to wrap in. They now span the section's full width, and the
   text is set for a phone: a 15.5px question that wraps in whole phrases, a
   compact icon, the +/- kept on the first line, and a 14.5px answer with
   open line spacing. */
@media (max-width: 767.98px) {
    /* (main:not(#_) gives this the weight to beat an older phone rule,
       section:not(#dashboard), which pads every section 10px with !important) */
    main:not(#_) .frequently_asked_wrapper {
        padding: 4px 0 0 !important;
    }

    .frequently_asked_wrapper > .container,
    .frequently_asked_wrapper .container {
        max-width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }

    .frequently_asked_wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }

    .frequently_asked_wrapper .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .frequently_asked_wrapper .frequently_asked_box {
        margin-bottom: 12px;
        border-radius: 16px;
    }

    .frequently_asked_wrapper .frequently_asked_btn {
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        padding: 14px 14px 14px 14px;
        text-align: left;
    }

    .frequently_asked_wrapper .frequently_asked_head_content {
        flex: 1;
        min-width: 0;
        align-items: flex-start;
        gap: 12px;
        padding-right: 0;
    }

    .frequently_asked_wrapper .frequently_asked_icon_circle {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: 0.875rem;
    }

    .frequently_asked_wrapper .frequently_asked_head_content h5 {
        flex: 1;
        min-width: 0;
        margin: 0;
        padding-top: 7px;
        font-size: 0.96875rem;
        font-weight: 600;
        line-height: 1.42;
        letter-spacing: -0.005em;
        text-align: left;
        text-wrap: pretty;
        overflow-wrap: break-word;
    }

    .frequently_asked_wrapper .frequently_asked_toggle_icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        margin-top: 4px;
    }

    .frequently_asked_wrapper .frequently_asked_body {
        margin-top: 0;
        padding: 0 16px 16px 62px;
        font-size: 0.90625rem;
        line-height: 1.65;
        color: #475569;
        text-align: left;
        text-wrap: pretty;
    }

    /* the line under the section heading */
    #faq_container .common_Heading p,
    .faq_container .common_Heading p {
        font-size: 1rem !important;
        line-height: 1.6;
        max-width: 32ch;
    }

    #faq_container .common_Heading,
    .faq_container .common_Heading {
        margin-bottom: 20px;
    }
}

/* narrow phones: the answer uses the full width instead of the indent */
@media (max-width: 379.98px) {
    .frequently_asked_wrapper .frequently_asked_body {
        padding-left: 16px;
    }

    .frequently_asked_wrapper .frequently_asked_head_content h5 {
        font-size: 0.9375rem;
    }
}

/* ---- 10. Home testimonials ----
   The reviewer's photo was placed on top of their name. It now sits at the
   top of the card and the name starts below it. */
@media (max-width: 575.98px) {
    .testimonial_main_wrapper .pos-0 {
        top: 25%;
    }

    .testimonial_card_main .testimonial_content_box {
        margin-top: 96px;
    }

    .testimonial_card_main .name {
        font-size: 1.125rem;
    }

    .testimonial_card_main .quote-mark {
        display: none;
    }

    .testimonial_card_main .review-text {
        margin-top: 8px;
        font-size: 0.875rem;
        line-height: 1.45;
    }
}

/* ---- 11. Services page ---- */
@media (max-width: 767.98px) {
    /* this section's heading sat 46px in while every other one sits at 22px */
    .Product_Design_Services_section .Product_Design_Services_wrapper > .container,
    .Product_Design_Services_section .Product_Design_Services_wrapper .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* the list of services was a 180px box that cut the fourth item in half */
    #product_design .nav {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex-wrap: nowrap;
    }

    #product_design .tabs {
        height: auto !important;
    }

    /* text ran 8px closer to the right edge than to the left */
    #web_dev .row > [class*="col-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

}

/* ---- 12. Page headers centred on phones ----
   Every hero (home, inner pages, service pages, contact, legal) reads from
   the centre on a phone: label, heading, intro, then the buttons, with the
   small rows (breadcrumb, points, chips) centred as groups. */
@media (max-width: 767.98px) {
    .dashboard_heading,
    .service_hero_content {
        text-align: center;
    }

    .dashboard_heading h1,
    .dashboard_heading > p,
    .dashboard_heading > span,
    .service_hero_content h1,
    .service_hero_content > p,
    .service_hero_content > span {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    .dashboard_heading h1,
    .service_hero_content h1 {
        text-wrap: balance;
    }

    /* small label above the heading */
    .dashboard_heading > span,
    .service_hero_content > span,
    .dashboard_heading .cp_hero_tag,
    .dashboard_heading .ct_status {
        display: table;
        margin-left: auto;
        margin-right: auto;
    }

    .dashboard_heading .ct_status {
        display: flex;
        width: fit-content;
    }

    /* rows of small items */
    .dashboard_heading .cp_breadcrumb,
    .dashboard_heading .cp_hero_actions,
    .dashboard_heading .ct_points,
    .dashboard_heading .ct_quick,
    .dashboard_heading .lg_meta,
    .service_hero_content .service_hero_btns,
    .service_hero_content > div {
        justify-content: center;
    }

    .dashboard_heading .cp_breadcrumb {
        display: flex;
        justify-content: center !important;
        width: 100%;
    }

    /* the button row always spans the heading block (it was 18px short on one page) */
    .dashboard_heading .cp_hero_actions {
        width: 100%;
        align-self: stretch;
    }

    .dashboard_heading .lg_meta li,
    .dashboard_heading .ct_quick_link {
        text-align: left;
    }

    /* home: the single button */
    .dashboard_wrapper .dashboard_heading > button,
    .main_dashboard_wrapper .dashboard_heading > button:not(.cp_btn) {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* services page: the "Explore / Get Started" pill */
    .dashboard_heading .btn_Prepare_wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
        padding: 12px 20px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .dashboard_heading .btn_Prepare_wrapper a {
        justify-content: center;
        min-height: 36px;
    }

    /* home hero cards: they were a fixed width and stuck out past a 320px screen */
    /* (a fixed aspect ratio plus a minimum height made them 337px wide) */
    .dashboard_card_wrapper .dashboard_card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        aspect-ratio: auto !important;
    }

    .dashboard_card_wrapper .dashboard_card button {
        min-height: 34px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* service pages: last tab was 7px from the screen edge */
    .tools_technology_tabs {
        padding-left: 4px;
        padding-right: 4px;
        scroll-padding: 0 12px;
    }

    #technology_experts .common_Heading a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }
}

/* ---- 13. Section text centred on phones (all pages) ----
   Section headings, the intro text under them, and cards built as
   icon / title / text read from the centre on a phone. What stays left on
   purpose: rows with an icon beside the text, lists, timelines, FAQ, forms
   and the legal documents - those are harder to read centred.
   (main:not(#_) gives these the weight to override the per-page left rules
   that still apply on desktop.) */
@media (max-width: 767.98px) {

    /* section heading blocks, including the ones left-aligned on desktop */
    main:not(#_) .common_Heading,
    main:not(#_) .portfolio_heading,
    main:not(#_) .web_dev_heading,
    main:not(#_) .why_choose_us_content,
    main:not(#_) .Product_Design_Services_text_col,
    main:not(#_) .transformative_experience_content {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    main:not(#_) .common_Heading h2,
    main:not(#_) .common_Heading p,
    main:not(#_) .portfolio_heading h2,
    main:not(#_) .portfolio_heading p,
    main:not(#_) .web_dev_heading h3,
    main:not(#_) #web_dev p,
    main:not(#_) .why_choose_us_content > h2,
    main:not(#_) .why_choose_us_content > p,
    main:not(#_) .why_choose_us_content > span,
    main:not(#_) .Product_Design_Services_text_col h2,
    main:not(#_) .Product_Design_Services_text_col p,
    main:not(#_) .transformative_experience_content h2,
    main:not(#_) .transformative_experience_content p {
        width: 100%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        text-align: center !important;
    }

    main:not(#_) .common_Heading .badge_text,
    main:not(#_) .why_choose_us_content > span {
        display: table;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* About: the paragraph beside "We Create Digital Experiences" */
    main:not(#_) .about_creative_content,
    main:not(#_) .about_creative_content p {
        text-align: center;
    }

    /* "Why choose" points are rows (tick beside the text): they stay left */
    main:not(#_) .why_choose_us_content .why_choose_us_point,
    main:not(#_) .why_choose_us_content .why_choose_us_point h3,
    main:not(#_) .why_choose_us_content .why_choose_us_point p {
        text-align: left !important;
        margin-left: 0;
    }

    /* buttons that follow a centred block */
    main:not(#_) .common_Heading > button,
    main:not(#_) .common_Heading > .btn,
    main:not(#_) .transformative_experience_content button,
    main:not(#_) .portfolio_btn {
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    main:not(#_) .ic_cert_section .cp_btn,
    main:not(#_) .ct_heading_left + .cp_btn {
        align-self: center;
    }

    main:not(#_) .ic_cert_section .col-lg-6:first-child {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* cards: icon on top, then title and text */
    main:not(#_) .cp_card,
    main:not(#_) .cp_step,
    main:not(#_) .dev_service_card_inner,
    main:not(#_) .dev_service_front,
    main:not(#_) .dev_service_hover,
    main:not(#_) .trending_detail_content,
    main:not(#_) .address_card_content,
    main:not(#_) .cp_project_body,
    main:not(#_) .Our_Result_driven_content {
        align-items: center;
        text-align: center;
    }

    main:not(#_) .cp_card .cp_icon,
    main:not(#_) .cp_step .cp_step_num,
    main:not(#_) .dev_service_front_icon,
    main:not(#_) .Our_Result_driven_icon,
    main:not(#_) .cp_value_card .cp_icon {
        margin-left: auto;
        margin-right: auto;
    }

    main:not(#_) .cp_card .cp_tags,
    main:not(#_) .cp_project_body .cp_tags {
        justify-content: center;
    }

    main:not(#_) .cp_card .cp_card_link,
    main:not(#_) .cp_project_body .cp_card_link {
        align-self: center;
    }

    /* a checklist inside a centred card: the block is centred, its lines stay
       left so the ticks line up */
    main:not(#_) .cp_card .cp_checklist {
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    /* panels and form cards: their title and intro line */
    main:not(#_) .cp_panel_title,
    main:not(#_) .cp_panel_text,
    main:not(#_) .cp_form_title,
    main:not(#_) .cp_form_intro,
    main:not(#_) .cdf_title,
    main:not(#_) .ct_form_note,
    main:not(#_) .service_form_heading {
        text-align: center;
    }

    main:not(#_) .service_form_heading > span,
    main:not(#_) .cp_info_card > .cp_hero_tag {
        display: table;
        margin-left: auto;
        margin-right: auto;
        align-self: center;
    }

    main:not(#_) .cp_panel_contact {
        text-align: center;
    }

    /* home hero cards and the process card: centred titles */
    main:not(#_) .development_process_wrap .active-content {
        text-align: center;
    }

    /* the outlined numeral on a value card moves out of the centred icon's way */
    main:not(#_) .cp_value_card .cp_value_num {
        right: 16px;
        top: 14px;
        font-size: 2.5rem;
    }
}

/* ---- 14. Phone typography ----
   From type-audit.js (every page at 390px and 320px). The scale was sound
   (32px page titles, 26px section headings, 15-17px text); these are the
   places that fell outside it. */
@media (max-width: 767.98px) {

    /* section intros a step down, so a centred intro runs fewer lines */
    main:not(#_) .common_Heading p:not(.section_eyebrow),
    main:not(#_) .development_services_heading p,
    main:not(#_) .app_solutions_heading p,
    main:not(#_) .tools_technology_heading p,
    main:not(#_) .app_process_heading p,
    main:not(#_) .why_choose_us_content > p,
    main:not(#_) .Product_Design_Services_text_col p,
    main:not(#_) .dashboard_heading > p,
    main:not(#_) .service_hero_content > p {
        font-size: 1rem !important;
        line-height: 1.6;
    }

    /* nothing readable below 14px */
    main:not(#_) .why_choose_us_point p,
    main:not(#_) .industries_card_wrapper .industries_card p {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* long labels set in capitals: tighter tracking, balanced lines */
    main:not(#_) .why_choose_us_tag,
    main:not(#_) .service_hero_subtitle {
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        line-height: 1.5;
        text-wrap: balance;
    }

    /* text that was too faint for its background (WCAG AA is 4.5:1) */
    main:not(#_) .development_services_heading p,
    main:not(#_) .why_choose_us_point p,
    main:not(#_) .dev_service_hover p {
        color: #55657a;                       /* 5.4:1 on #eef3f9, was 4.27:1 */
    }

    #solution_Faq_Container {
        background-color: #0a6fb0;            /* white text 5.3:1, was 3.5:1 on #0c91cf */
    }

    main:not(#_) .accordion-button:not(.collapsed) .accordion_header_content h4 {
        color: #0369a1;                       /* 5.9:1 on white, was 3.9:1 */
    }

    #office_Address .address_card_content h4 {
        color: #b4470d;                       /* 5.0:1, was 2.95:1 */
    }

    /* (company-pages.css loads after this file, so its classes need the extra weight) */
    main:not(#_) .lg_toc_list a span {
        color: #5b6b7f;                       /* 5.0:1, was 2.4:1 */
    }

    main:not(#_) #Our_Result_driven_card_1 .Our_Result_driven_btn {
        color: #006b75;                       /* 6.0:1 on white, was 3.9:1 */
    }
}

/* small phones (under 360px): headings a step down so none runs to five lines */
@media (max-width: 359.98px) {
    main:not(#_) .dashboard_heading h1,
    main:not(#_) .service_hero_content h1 {
        font-size: 1.625rem !important;
        line-height: 1.18;
    }

    main:not(#_) .common_Heading h2,
    main:not(#_) [class*="_heading"]:not(.portfolio_heading):not(.service_form_heading) > h2,
    main:not(#_) .why_choose_us_content > h2,
    main:not(#_) .Product_Design_Services_text_col h2 {
        font-size: 1.4375rem !important;
        line-height: 1.22;
    }

    /* legal sections: number above the heading instead of beside it */
    main:not(#_) .lg_content.privacy-box .lg_section h2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        font-size: 1.1875rem;
    }

    main:not(#_) .lg_section .lg_num {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 0.8125rem;
    }
}

/* ---- 15. Industries cards: no movement on hover/tap (phones) ----
   On a phone a tap leaves the card in its hover state, so it stayed lifted
   and its icon stayed enlarged and tilted, overlapping the card beside it in
   the two-column grid. */
/* (also on tablets, and on any touch screen whatever its width) */
@media (max-width: 991.98px), (hover: none) {
    .industries_card_wrapper .industries_card:hover {
        transform: none;
        box-shadow: none !important;
    }

    .industries_card_wrapper .industries_card:hover .card_img,
    .industries_card_wrapper .industries_card:hover .card_img img {
        transform: none;
    }
}

@media (max-width: 767.98px) {

    /* Services page: these two intros are left-aligned on desktop by an
       id-level rule, so they need naming here to centre on phones */
    main:not(#_) #product_design .common_Heading p,
    main:not(#_) #seamless_product_design .common_Heading p {
        margin-left: auto;
        margin-right: auto;
        text-align: center !important;
    }
}

/* ---- 16. Hero spacing on phones ----
   About and Services: three stacked margins (25 + 40 + 24px) left 89px
   between the intro text and the picture, while the picture ran right to
   the bottom edge of the section. Now 28px above the picture and 40px
   below it. Contact: the hero kept the 88px bottom padding meant for pages
   with a stats strip, which it does not have. */
@media (max-width: 767.98px) {
    .main_dashboard_wrapper:not(.cp_hero) .dashboard_heading {
        margin-bottom: 0;
    }

    .main_dashboard_wrapper:not(.cp_hero) .dashboard_heading > :last-child {
        margin-bottom: 0;
    }

    .main_dashboard_wrapper:not(.cp_hero) .row {
        --bs-gutter-y: 28px;
    }

    section.main_dashboard_wrapper:not(.cp_hero) {
        padding-bottom: 40px !important;
    }

    section.main_dashboard_wrapper.ct_hero {
        padding-bottom: 48px;
    }
}

/* ---- 17. Space between sections on phones ----
   Measured from the last thing you see in one section to the first thing in
   the next (gapscan.js): most joins were 96-112px and many 120-173px, which
   on a phone is most of a screen of nothing. Each section now contributes
   28-44px, so joins land around 70-90px across the site.
   (main:not(#_) carries the weight needed to beat the older phone rule that
   pads every section with !important.) */
@media (max-width: 767.98px) {

    /* sections with no background of their own: Home, About, Services */
    main:not(#_) > #who_Using,
    main:not(#_) > #our_clients,
    main:not(#_) > #our_Services,
    main:not(#_) > #tech_capabilities,
    main:not(#_) > #industries,
    main:not(#_) > .development_process_wrap,
    main:not(#_) > #our_Portfolio,
    main:not(#_) > #faq_container,
    main:not(#_) > #aboutCreative,
    main:not(#_) > #transformative_experiences,
    main:not(#_) > #vision_and_mission,
    main:not(#_) > #our_process_container,
    main:not(#_) > #trending_details,
    main:not(#_) > #product_design,
    main:not(#_) > #service_cards_container,
    main:not(#_) > .Product_Design_Services_section,
    main:not(#_) > #seamless_product_design,
    main:not(#_) > #web_dev {
        margin-top: 0 !important;
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }

    /* coloured bands keep a little more air inside, none outside */
    main:not(#_) > #solution_Faq_Container,
    main:not(#_) > #testimonial_container,
    main:not(#_) > #office_Address,
    main:not(#_) > #technology_experts {
        margin-top: 12px !important;
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    /* company, solution, contact and legal pages */
    main:not(#_) > .cp_section {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    /* the picture sat 12px above the stats card that overlaps the hero */
    main:not(#_) > .cp_hero:not(.ct_hero):not(.lg_hero) {
        padding-bottom: 92px;
    }

    /* service pages: two sections ended with extra room under their content */
    main:not(#_) > .trusted_brands_section {
        padding-bottom: 16px !important;
    }

    main:not(#_) > .why_choose_us_section {
        padding-bottom: 20px !important;
    }

    main:not(#_) > .cp_cta_section {
        padding-bottom: 40px;
    }

    /* Home hero: 88px sat between the button and the first service card */
    #dashboard.dashboard_wrapper .dashboard_heading {
        margin-bottom: 0;
    }

    #dashboard.dashboard_wrapper .row > [class*="col-"] + [class*="col-"] {
        margin-top: 36px;
    }

    /* the footer's own colour starts straight after the last section */
    footer#footer.footer {
        margin-top: 0;
    }
}

/* ---- 18. Services page: industry carousel cards on phones ----
   The cards kept their desktop proportions: 50px padding, a 95px icon and a
   text column capped at 90%, which left the text only ~190px wide and made
   each card 530px tall. Compact padding and a full-width text column bring
   it to roughly 60% of that. The card also no longer lifts when touched. */
@media (max-width: 767.98px) {
    .Product_Design_Services_wrapper .Product_Design_Services_card {
        padding: 24px 18px 22px;
        border-radius: 20px;
    }

    .Product_Design_Services_wrapper .Product_Design_Services_icon {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
    }

    .Product_Design_Services_wrapper .Product_Design_Services_icon i {
        font-size: 1.5rem;
    }

    .Product_Design_Services_wrapper .Product_Design_Services_icon img {
        width: 34px;
        height: 34px;
    }

    main:not(#_) .Product_Design_Services_wrapper .Product_Design_Services_card_title {
        margin-bottom: 8px;
        font-size: 1.125rem;
        letter-spacing: -0.01em;
    }

    main:not(#_) .Product_Design_Services_wrapper .Product_Design_Services_card_text {
        max-width: none;
        font-size: 0.90625rem;
        font-weight: 400;
        line-height: 1.6;
    }

    .Product_Design_Services_wrapper .splide__slide {
        padding-bottom: 8px;
    }

    .Product_Design_Services_wrapper .Product_Design_Services_btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
}

/* no lift on touch: a tap leaves the card in its hover state */
@media (max-width: 991.98px), (hover: none) {
    .Product_Design_Services_wrapper .Product_Design_Services_card:hover {
        transform: none;
        box-shadow: none;
    }

    .Product_Design_Services_wrapper .Product_Design_Services_btn:hover {
        transform: none;
    }
}

/* ---- 19. Footer: stray line under the newsletter box (phones and tablets) ----
   The orange underline of the "Support Enquiries" and "Stay Updated"
   headings is positioned against the whole column instead of its own heading,
   so both lines landed at the bottom of the column, under the newsletter
   field. Switched off here (desktop is left as it is). */
@media (max-width: 991.98px) {
    #footer .footer_connection_box h3::after {
        display: none;
    }
}

/* ---- 20. Home on phones: reading text, card gaps, Who's Using cards ----
   Intro paragraphs came in four widths and three line heights, and card text
   ran from 14px to 16px. Phones now get one scale: 15px intros across the
   full text column, 14px card text, both at 1.6, with ragged lines balanced
   so no word sits alone on the last line. */
@media (max-width: 767.98px) {

    /* paragraph under each section heading */
    main:not(#_) > :is(#who_Using, #our_clients, #our_Services, #solution_Faq_Container, #tech_capabilities, #industries, .development_process_wrap, #our_Portfolio, #faq_container, #testimonial_container, #office_Address) h2 ~ p:not(.section_eyebrow) {
        font-size: 14px !important;
        line-height: 1.6 !important;
        letter-spacing: 0;
        margin-bottom: 12px !important;
        max-width: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-wrap: pretty;
    }

    main:not(#_) > :is(#who_Using, #our_clients, #our_Services, #tech_capabilities, #industries, .development_process_wrap, #our_Portfolio, #faq_container, #testimonial_container, #office_Address) h2 ~ p:not(.section_eyebrow) {
        color: #4b5563;
    }

    /* hero paragraph: same rhythm, one step larger as the page lead */
    main:not(#_) > #dashboard .dashboard_heading p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        letter-spacing: 0;
        text-wrap: pretty;
    }

    /* text inside cards */
    main:not(#_) .mySwiper1_card p,
    main:not(#_) #our_Services .service-card p,
    main:not(#_) .industries_card_wrapper .industries_card p,
    main:not(#_) .development_process_wrap p:not(.heading_para_narrow),
    main:not(#_) #our_Portfolio .portfolio_slider_card p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        letter-spacing: 0;
        color: #4b5563;
        text-wrap: pretty;
    }

    /* card titles one step above the text */
    main:not(#_) .mySwiper1_card h4 {
        font-size: 16px;
        line-height: 1.3;
        font-weight: 700;
        margin-bottom: 6px;
    }

    /* other card text on Home, on the same 13px scale */
    main:not(#_) > #office_Address .address_card_content p,
    main:not(#_) > #testimonial_container .swiper-slide p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        font-weight: 400;
    }

    main:not(#_) #our_Services .service-card h3,
    main:not(#_) #our_Services .service-card h4 {
        font-size: 18px !important;
    }

    /* Who's Using: the card was 417px tall for four lines of text, with 76px
       kept under the text for the arrows */
    main:not(#_) .mySwiper1_card {
        padding: 20px 20px 62px;
    }

    main:not(#_) .mySwiper1_card .card-img,
    main:not(#_) .mySwiper1_card .card-img img {
        width: 44px;
        height: 44px;
    }

    main:not(#_) .mySwiper1_card .card-img {
        margin-bottom: 14px;
    }

    main:not(#_) .mySwiper1_card p {
        margin-bottom: 0;
    }

    /* Hero service cards: 10px under each card plus 36px above the next one
       left 46px of blue between them */
    main:not(#_) .dashboard_card_wrapper > .row {
        margin-top: 0;
        row-gap: 14px;
    }

    main:not(#_) .dashboard_card_wrapper > .row > [class*="col-"] {
        margin-top: 0 !important;
    }

    main:not(#_) .dashboard_card_wrapper .dashboard_card {
        margin-bottom: 0;
    }

    /* Tech Capabilities: cards sat 26px apart one way and 10px the other, and
       the tab bar had about 50px of nothing under it */
    main:not(#_) .tech_capabilities-wrapper {
        padding: 20px 8px;
    }

    main:not(#_) .tech_capabilities-wrapper > .col-custom-tech-left {
        margin-top: 0;
    }

    main:not(#_) .tech_capabilities-tabs {
        margin-bottom: 0;
    }

    main:not(#_) .tech_capabilities-wrapper > .col-custom-tech-right {
        margin-top: 16px;
    }

    main:not(#_) .tech_capabilities-content > .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 0;
        margin: 0 -6px;
        row-gap: 12px;
    }

    main:not(#_) .tech_capabilities-content > .row > [class*="col-"] {
        margin-top: 0;
        padding: 0 6px;
    }

    /* Our Services: 30px between stacked cards */
    main:not(#_) #our_Services .service-wrapper {
        gap: 16px;
    }

    /* the open card was lifted 5px, so the gap under it looked larger */
    main:not(#_) #our_Services .service-card.active-card {
        transform: none;
    }

    /* Testimonials: the heading block carried its own side padding, so its
       paragraph was narrower than every other intro on the page */
    main:not(#_) > #testimonial_container .common_Heading {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ---- 21. Home + About industries: one card per row on phones ---- */
@media (max-width: 767.98px) {
    main:not(#_) > #industries .industries_card_wrapper .row > [class*="col-"] {
        width: 100%;
    }

    main:not(#_) > #industries .industries_card {
        padding: 20px 20px 18px;
    }

    main:not(#_) > #industries .industries_card p {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---- 22. Home Development Process: wider flow on phones ----
   The steps sat inside three layers of side padding and an odd 7px margin,
   so a 390px phone gave them 243px. They now fill the grey panel, 12px in
   from its edges. */
@media (max-width: 767.98px) {
    main:not(#_) > .development_process_wrap .development_process_inner_wrap > .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    main:not(#_) > .development_process_wrap .timeline-area {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* 81px between the intro paragraph and the first step (paragraph,
       heading block and row margins plus 30px above the flow); now 24px */
    main:not(#_) > .development_process_wrap .heading_para_narrow,
    main:not(#_) > .development_process_wrap .common_Heading,
    main:not(#_) > .development_process_wrap .row.text-center {
        margin-bottom: 0 !important;
    }

    main:not(#_) > .development_process_wrap .timeline-area {
        margin-top: 12px !important;
    }

    main:not(#_) > .development_process_wrap .timeline-area .node {
        max-width: none;
        width: 100%;
    }
}

/* ---- 23. Testimonials: larger side photos on phones ----
   The seven photos around the card showed at 29px; they now show at about
   42px. The large photo in the card is unchanged. */
@media (max-width: 767.98px) {
    main:not(#_) #testimonial_container .avatar:not(.pos-0) {
        width: 60px !important;
        height: 60px !important;
    }
}

/* ---- 24. Paragraph scale on every page (phones) ----
   Paragraphs ran from 13px to 17px at line heights from 1.4 to 1.8, some in
   medium or semibold. One scale now, the same as Home:
     hero lead 15px · intros and running text 14px · card text 13px
   Eyebrows, labels, counters and the FAQ (tuned in section 9) are left out. */
@media (max-width: 767.98px) {

    /* card and supporting text: the base for every paragraph */
    main:not(#_) p:not([class*="eyebrow"], [class*="label"], [class*="tag"], [class*="count"], [class*="number"], [class*="stat"], .accordion *, .frequently_asked_wrapper *) {
        font-size: 13px !important;
        line-height: 1.6 !important;
        letter-spacing: 0 !important;
        font-weight: 400;
        text-wrap: pretty;
    }

    /* intros under a section heading, and running text such as the legal
       pages and long About passages */
    main:not(#_) :is(h1, h2) ~ p:not([class*="eyebrow"], [class*="label"], [class*="tag"]),
    main:not(#_) :is(.common_Heading, [class*="_heading"], [class*="-heading"], [class*="_intro"], .lg_section, .lg_intro, [class*="creative_content"], [class*="experience_content"], .web-dev-content) > p:not([class*="eyebrow"], [class*="label"], [class*="tag"]),
    main:not(#_) p:is(.cp_cta_text, .cp_section_intro, .heading_para_narrow, .text-start, .text-lg-start) {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* links and bold words inside a paragraph take its size */
    main:not(#_) p :is(a, strong, b, em, span):not([class]) {
        font-size: inherit !important;
        line-height: inherit !important;
    }

    /* the lead paragraph in each page's hero */
    main:not(#_) > section:first-child :is(.dashboard_heading, .service_hero_content, .cp_hero_content, [class*="hero_content"], [class*="hero_text"]) > p,
    main:not(#_) > section:first-child h1 ~ p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* ---- 25. Sidebar opening on phones ----
   Opening the drawer turned the hamburger into a white cross on the right
   of the screen; its lines animated every property, visibility included, so
   that cross stayed on screen for 0.3s before vanishing. The drawer has its
   own close button, so the hamburger now keeps its shape and simply fades
   out while the drawer slides in, and fades back when it closes. */
@media (max-width: 767.98px) {
    #header .mobile_menu_toggle {
        transition: opacity 0.22s ease 0.12s, visibility 0s linear 0s;
    }

    #header .mobile_menu_toggle.active {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    }

    #header .mobile_menu_toggle span {
        transition: none !important;
    }

    #header .mobile_menu_toggle.active span {
        transform: none !important;
        opacity: 1 !important;
        background: linear-gradient(90deg, #12B3E9 0%, #066FB6 100%) !important;
    }

    #header .mobile_menu_toggle.active span:nth-child(2) {
        width: 22px !important;
    }

    #header .mobile_menu_toggle.active span:nth-child(3) {
        width: 28px !important;
    }
}

/* ---- 26. One spacing system on phones (every page) ----
   Measured with secbreak.js / space.js: sections used 28, 36, 42 and 44px
   (joins up to 88-112px), and several hid another 12-40px of margin inside.
   Phones now follow one scale:
     plain sections 32px top and bottom   -> two of them meet at about 64px
     coloured bands 40px inside, none outside
     eyebrow -> heading 10 · heading -> intro 10 · intro -> content 24 */
@media (max-width: 767.98px) {

    /* plain sections */
    main:not(#_) > :is(#who_Using, #our_clients, #our_Services, #tech_capabilities, #industries, #our_Portfolio, #faq_container, #aboutCreative, #transformative_experiences, #vision_and_mission, #our_process_container, #trending_details, #product_design, #service_cards_container, #seamless_product_design, #web_dev),
    main:not(#_) > :is(.development_process_wrap, .Product_Design_Services_section, .cp_section:not(.cp_section_alt)) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    /* coloured bands */
    main:not(#_) > :is(#solution_Faq_Container, #testimonial_container, #office_Address, #technology_experts),
    main:not(#_) > :is(.cp_section_alt, .app_process_section, .app_solutions_section, .development_services_section, .tools_technology_section, .why_choose_us_section, .trusted_brands_section) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* heading blocks: no outer margin of their own; the section padding and
       the 24px below decide the space */
    main:not(#_) > section:not(:first-child) .common_Heading {
        margin-top: 0 !important;
    }

    main:not(#_) > section:not(:first-child) :is(h2, h3) + p {
        margin-top: 0 !important;
    }

    main:not(#_) > section:not(:first-child) h2:has(+ p) {
        margin-bottom: 10px !important;
    }
}

/* 26b. Hidden space at the start or end of a section (traced with trail.js) */
@media (max-width: 767.98px) {

    /* Home: Our Clients panel had 25px above it, Portfolio panel 25px under it */
    main:not(#_) > #our_clients .tech_capabilities_wrapper,
    main:not(#_) > #our_Portfolio .portfolio_Container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* the last question in a list kept the gap meant for the next one */
    main:not(#_) .accordion-item:last-child,
    main:not(#_) .frequently_asked_box:last-child,
    main:not(#_) .col-lg-6:last-child > .frequently_asked_box:last-child {
        margin-bottom: 0 !important;
    }

    /* About: the closing paragraph of the opening story */
    main:not(#_) > #aboutCreative .about_creative_content > p:last-child {
        margin-bottom: 0 !important;
    }

    /* service pages: Why Choose ended with 30px + 40px of margins */
    main:not(#_) > .why_choose_us_section .why_choose_us_content,
    main:not(#_) > .why_choose_us_section .why_choose_us_points {
        margin-bottom: 0 !important;
    }

    /* service pages: logo slider kept 34px under the logos */
    main:not(#_) > .trusted_brands_section .trustedBrandsSlider {
        padding-bottom: 12px !important;
    }

    /* footer: the logo sat 16px below the footer's own padding, and the last
       column ended with 25px of margin */
    #footer.footer .footer_logo img {
        margin-top: 0 !important;
    }

    #footer.footer .row > [class*="col-"]:last-child ul:last-child {
        margin-bottom: 0 !important;
    }

    footer#footer.footer {
        padding-top: 40px !important;
    }
}

/* 26c. Heading -> content gaps that were off the 24px step */
@media (max-width: 767.98px) {

    /* eyebrow label -> heading: 8, 12, 14 or 23px before; 10px everywhere */
    main:not(#_) > section:not(:first-child) :is([class*="eyebrow"], [class*="badge"], [class*="subtitle"], [class*="sub_title"], [class*="tagline"], span, small):has(+ h2) {
        margin-bottom: 10px !important;
    }

    main:not(#_) > section:not(:first-child) :is([class*="eyebrow"], [class*="badge"], [class*="subtitle"], [class*="sub_title"], [class*="tagline"], span, small) + h2 {
        margin-top: 0 !important;
    }

    /* Services > Technology Experts: 60px above the form */
    main:not(#_) > #technology_experts .common_Heading {
        margin-bottom: 24px !important;
    }

    main:not(#_) > #technology_experts .technology_expert_form {
        margin-top: 0 !important;
    }

    /* Home > Testimonials: 93px between the intro and the card */
    main:not(#_) > #testimonial_container {
        min-height: 0 !important;
    }

    main:not(#_) > #testimonial_container .testimonial_main_wrapper {
        margin-top: 0 !important;
        height: 400px !important;
    }

    /* service pages > Trusted Collaboration: 40px above the logos */
    main:not(#_) > .trusted_brands_section .trustedBrandsSlider {
        margin-top: 0 !important;
        padding-top: 8px !important;
    }

    /* Home > Our Clients: 54px above the logo strip */
    main:not(#_) > #our_clients .clients_marquee_container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    main:not(#_) > #our_clients .row > .col-lg-8 {
        margin-top: 10px !important;
    }

    /* Home > Portfolio: only 15px above the panel */
    main:not(#_) > #our_Portfolio .common_Heading {
        margin-bottom: 24px !important;
    }
}

/* ---- 27. Home > We Create New Solution: open accordion on phones ----
   The answer was 15px, started 1px under the heading row and sat 18px in,
   while the icon above it sat 15px in. It is now set like the rest of the
   card text, with a hairline and 14px of air under the heading, and the same
   16px inset as the heading row. */
@media (max-width: 767.98px) {
    main:not(#_) > #solution_Faq_Container .accordion-button {
        padding-left: 16px !important;
        padding-right: 48px !important;
    }

    main:not(#_) > #solution_Faq_Container .accordion-body {
        margin: 0 !important;
        padding: 24px 16px 18px !important;
        background-image: linear-gradient(#e2e8f0, #e2e8f0) !important;
        background-size: calc(100% - 32px) 1px !important;
        background-position: 16px 10px !important;
        background-repeat: no-repeat !important;
        font-size: 13.5px !important;
        line-height: 1.65 !important;
        letter-spacing: 0 !important;
        font-weight: 400;
        color: #4b5563 !important;
        text-align: left;
        text-wrap: pretty;
    }
}

/* ---- 28. Heading scale on every page (phones) ----
   Measured with htype.js: card titles ran from 14 to 22px in weights 500 to
   800, panel titles from 21 to 25px, and the page title was 32px. One
   hierarchy now:
     page title (h1)         30px / 800 / 1.15
     section heading (h2)    24px / 700 / 1.25
     panel or form title     20px / 700 / 1.30
     card title (h3)         17px / 700 / 1.35
     small card title        16px / 600 / 1.35
   FAQ questions, label-style headings and tech chips keep their sizes.
   (main:not(#_):not(#_) outweighs the older per-section rules.) */
@media (max-width: 767.98px) {

    main:not(#_):not(#_) :is(h1, h2, h3, h4, h5, h6) {
        text-wrap: balance;
    }

    main:not(#_):not(#_) h1 {
        font-size: 30px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.025em !important;
    }

    main:not(#_):not(#_) h2:not(.accordion-header, .tab-pane h2) {
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.02em !important;
    }

    main:not(#_):not(#_) h3:not(.tech_card h3, .tech_card *) {
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        letter-spacing: -0.01em !important;
    }

    main:not(#_):not(#_) :is(h4, h5, h6):not(.frequently_asked_head_content *, .address_card_content *, .portfolio_features_heading, .portfolio_card-title) {
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        letter-spacing: -0.01em !important;
    }

    /* titles of panels, forms and large slides */
    main:not(#_):not(#_):not(#_) :is(.service_form_heading h2, h2.cp_panel_title, h2.cp_form_title, h2.cdf_title, .cdf_title, .lg_section > h2, h2.portfolio_heading, .portfolio_heading h2, h3.vision_slide_title, h3.ct_office_city) {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    /* Portfolio slider cards: their title is the card's main line */
    main:not(#_):not(#_):not(#_) .portfolio_slider_card h5 {
        font-size: 18px !important;
        font-weight: 700 !important;
    }
}

@media (max-width: 359.98px) {
    main:not(#_):not(#_) h1 {
        font-size: 26px !important;
    }

    main:not(#_):not(#_) h2:not(.accordion-header, .tab-pane h2) {
        font-size: 22px !important;
    }

    main:not(#_):not(#_):not(#_) :is(.service_form_heading h2, h2.cp_panel_title, h2.cp_form_title, h2.cdf_title, .cdf_title, .lg_section > h2, h2.portfolio_heading, .portfolio_heading h2, h3.vision_slide_title, h3.ct_office_city) {
        font-size: 19px !important;
    }
}

/* ---- 29. Sidebar closing on phones ----
   Opening and closing shared one curve that starts at full speed, so on
   closing the drawer covered half its width in the first 50ms and read as a
   snap. Closing now uses an even ease-in-out over 0.34s, the dark overlay
   fades on the same timing, and the drawer stays visible until it has fully
   slid out. Opening keeps its quick, soft-landing curve. */
@media (max-width: 767.98px) {
    #header .navbar_menu_wrapper {
        will-change: transform;
        transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.34s !important;
    }

    #header .navbar_menu_wrapper.active {
        transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s !important;
    }

    .navbar_overlay {
        transition: opacity 0.34s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.34s !important;
    }

    .navbar_overlay.active {
        transition: opacity 0.3s ease, visibility 0s linear 0s !important;
    }
}

/* ---- 30. Testimonials: side photos clear of the review text ----
   That slot sat 10% in, against 3-5% for the other two on the left, and on
   phones it covered 20-49px of the text beside it. It now sits further out,
   by width, so it only overlaps the card edge. (Photos swap slots when
   tapped; the position belongs to the slot, so every photo follows it.) */
@media (max-width: 575px) {
    main:not(#_) #testimonial_container .avatar.pos-2,
    main:not(#_) #testimonial_container .avatar.pos-3 {
        left: 0 !important;
    }
}

@media (max-width: 399.98px) {
    main:not(#_) #testimonial_container .avatar.pos-2,
    main:not(#_) #testimonial_container .avatar.pos-3 {
        left: -12px !important;
    }
}

@media (max-width: 359.98px) {
    main:not(#_) #testimonial_container .avatar.pos-2,
    main:not(#_) #testimonial_container .avatar.pos-3 {
        left: -30px !important;
    }

    /* the two lower photos on the right touched the text on small phones */
    main:not(#_) #testimonial_container .avatar.pos-5 {
        left: calc(78% + 16px) !important;
    }

    main:not(#_) #testimonial_container .avatar.pos-7 {
        left: calc(78% + 12px) !important;
    }
}

/* ---- 31. Home hero cards on phones ----
   The illustrations and gradients now apply on every screen (see the
   "illustrations on every screen" section above this block). Phones only
   size the card and give the title a little more room. */
@media (max-width: 767.98px) {
    main:not(#_) .dashboard_card_wrapper .dashboard_card {
        height: auto !important;
        min-height: 150px;
    }

    main:not(#_) .dashboard_card_wrapper .dashboard_card_content {
        width: 44% !important;
        margin-left: 18px !important;
    }
}

/* very narrow phones: one column again so the text is not squeezed */
@media (max-width: 339.98px) {
    .industries_card_wrapper .row > [class*="col-"] {
        width: 100%;
    }
}
/* mobile-polish:end */