* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    color: #111;
    overflow-x: hidden !important;
}

.ai-service-cta-card .ai-service-buttons {

    margin-top: 0px;

}

/*:root{
    --solution-card-width: 560px;
    --solution-card-height: 520px;
}*/
/* =========================
   SOLUTIONS & SERVICES SECTION
========================= */

.solutions-services-section {
    position: relative;
    width: 100%;
    /*      height: 500px;*/
    height: 100vh;
    min-height: 552px;
    overflow: hidden;
    margin-top: 0px;

}

.solutions-services-section {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

@media (min-width: 991px) {
    .solutions-services-page #navBackground5 {
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 991px) {
    .solutions-services-page .section-container {
        justify-content: space-between;
    }

}

.solutions-services-page #navBackground5.change {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* BACKGROUND IMAGE */
.solutions-services-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%; /* ← was 100vh, causing the stretch */
    object-fit: fill; /* ← remove the strikethrough on this */
    /* object-fit: cover; */
    z-index: 1;
}

.solutions-services-overlay-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 2;

    opacity: 0.45;

    mix-blend-mode: multiply;

    pointer-events: none;
}

/* MAIN CONTAINER */
.solutions-services-container {
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 1400px;

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;

    padding: 0 20px;
}

/* CONTENT */
.solutions-services-content {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;
    text-align: center;
}

/* HEADING */
.solutions-services-heading {
    font-size: 43px;
    line-height: 1.15;
    font-weight: 600;
    color: #fff;
    margin-bottom: 22px;
}

/*.solutions-services-heading span{
    display: block;
    color: #EB5145;
    font-size: 48px;
    font-weight: 700;
}*/
.solutions-services-heading span {
    display: block;
    color: #EB5145;
    font-size: 43px;
    font-weight: 600;
}

/* SUBHEADING */
.solutions-services-subheading {
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 22px;
}

/* DESCRIPTION */
.solutions-services-description {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    max-width: 566px;
    margin: 0 auto 42px;
    font-weight: 400;
}

.solutions-services-section .hero-industries-buttons {
    justify-content: center;
}

.solutions-services-section .hero-industries-buttons .btn {
    /*    width: 226px;*/
    height: 50px;
    font-size: 14px;
    border-radius: 0;
    min-width: 226px;
    padding: 0 24px;
    white-space: nowrap;
}

.solutions-services-section .hero-industries-buttons .primary {
    background: #FFF;
    color: black;
    font-weight: 400;
    font-size: 14px;
}

.solutions-services-section .hero-industries-buttons .primary:hover {
    background: #EB5145;
    border-color: #EB5145;
    color: #FFF;
}

.solutions-services-section .secondary:hover::before,
.solutions-services-section .secondary:hover::after {
    background: #FFF;
    border-color: #fff;
    color: #EB5145;
}

.solutions-services-section .hero-industries-buttons .secondary:hover {
    background: #FFF;
    border-color: #fff;
    color: #EB5145;
}

.solutions-services-section .hero-industries-buttons .secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: white;
    font-weight: 400;
    font-size: 14px;
}

.solutions-services-section .hero-industries-buttons .btn:hover {
    transform: translateY(-2px);
}

.solutions-services-page .stat-text {

    max-width: 196px;
}

/*.solutions-services-page .stats-bar{
    background: #FAFAFA !important;
}*/

/*.solutions-services-page .stat-number{
color: #000;
font-weight: 550;
}*/
/* =========================
   LARGE LAPTOPS
========================= */
@media (max-width: 1200px) {

    .solutions-services-heading {
        font-size: 3.5rem;
    }

}

/* =========================
   TABLETS
========================= */
@media (max-width: 992px) {

    .solutions-services-section {
        min-height: 850px;
    }

    .solutions-services-heading {
        font-size: 3rem;
    }

    .solutions-services-description {
        font-size: 0.95rem;
        line-height: 1.8;
    }

}

/* =========================================
   AI SERVICES SECTION
========================================= */

.ai-services-section {
    width: 100%;
    background: #FFF;
    /*   padding: 80px 0px;*/
    padding: 80px 0px 0px
}

/* CONTAINER */
.ai-services-container {
    width: 100%;
    /*    max-width: 1400px;*/
    margin: 0 auto;
}

/*HEADER*/

.ai-services-header {
    text-align: center;
    margin-bottom: 30px;
}

.ai-services-heading {
    font-size: 44px;
    font-weight: 700;
    color: #B3B3B3;
    margin-bottom: 20px;
}

.ai-services-heading span {
    color: #000000;
    font-size: 41px;
    font-weight: 700;
}

.ai-services-subheading {
    max-width: 643px;
    margin: 0 auto;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.3;
    color: #000000;
}

/*GRID*/

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

    border-top: 1px solid #d8d8d8;
    border-left: 1px solid #d8d8d8;
}

/*CARD*/

.ai-service-card {
    border-right: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    padding: 40px 40px 40px 40px;
    background: #FFF;
    display: flex;
    flex-direction: column;
    /*    min-height: 457px;*/
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s ease;
}

.ai-service-cta-card {
    grid-column: 1 / -1;
    border-right: 1px solid #E0E0E0;
    border-bottom: none;
    padding: 40px 40px 40px 40px;
    background: #FFF;
    display: flex;
    flex-direction: column;
    /*    min-height: 457px;*/
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s ease;


}

.ai-services-grid > .ai-service-card:last-of-type {
    border-bottom: none;
}

.ai-service-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    bottom: -100%;

    width: 100%;
    height: 100%;
    transform: translateY(100%);
    background: linear-gradient(180deg, #F5E7BB 0%, #FFFFFF 100%);

    z-index: -1;
    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    /*    transition: bottom 0.6s cubic-bezier(0.19, 1, 0.22, 1);*/
}

/* HOVER */
/*.ai-service-card:hover::before{
    bottom: 0;
}*/
.ai-service-card:hover::before {
    transform: translateY(0);
}

/* Ensure card content (tags, buttons) stays clear */
.ai-service-card:hover {
    border-color: #d8d8d8;
}

/* CARD TITLE */
.ai-service-title {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
    margin-bottom: 15px;
}

/* DESCRIPTION */
.ai-service-description {
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    color: #000;
    margin-bottom: 30px;
    max-width: 580px;
}

/* TAGS*/

.ai-service-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 40px;
    max-width: 493px;
}

.ai-service-tags span {
    padding: 8px 16px;
    border: 1px solid #E3E3E3;
    font-size: 12px;
    font-weight: 500;
    color: #000000;
    background: #FFF;
}

/*BUTTONS*/

.ai-service-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    flex-wrap: wrap;
}

.ai-service-buttons .btn.primary,
.ai-service-buttons .btn.secondary {
    position: relative;
    overflow: hidden;

    border-radius: 0 !important;

    transform: none !important;

    box-shadow: none !important;
}

.ai-service-buttons .btn.primary::before,
.ai-service-buttons .btn.primary::after,
.ai-service-buttons .btn.secondary::before,
.ai-service-buttons .btn.secondary::after {
    display: none !important;
    content: none !important;
}

.ai-service-buttons .btn.primary:hover {
    background: #EB5145 !important;
    border-color: #EB5145 !important;
    color: #fff !important;
}

.ai-service-buttons .btn.secondary:hover {
    background: transparent !important;
    border-color: #EB5145 !important;
    color: #000 !important;
}

/* BUTTON COMMON */
.ai-service-btn-primary,
.ai-service-btn-secondary,
.ai-services-main-btn {
    height: 43px;
    width: 192px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    text-decoration: none;
    /*    text-transform: uppercase;*/

    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.5px;

    transition: all 0.35s ease;
}

/* PRIMARY BUTTON */
.ai-service-btn-primary,
.ai-services-main-btn {
    background: #000000;
    color: #ffffff;

    border: 1px solid #000000;
}

.ai-service-cta-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #F5E7BB 0%, #FFFFFF 100%);
    opacity: 0.7;

    transform: translateY(100%);

    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 0.8s ease;

    z-index: -1;
}

/*.ai-service-cta-card:hover::before{
    transform: translateY(0);
    opacity: 1;
}*/
/*.ai-service-btn-primary:hover,
.ai-services-main-btn:hover{
    background: transparent;
    color: #000000;
}*/

/* SECONDARY BUTTON */
.ai-service-btn-secondary {
    background: transparent;
    color: #000000;

    border: 1px solid #bdbdbd;
}

/*
.ai-service-btn-secondary:hover{
    background: #000000;
    color: #ffffff;
}*/
.ai-service-btn-primary:hover {
    background: #EB5145 !important;
    border-color: #EB5145 !important;
    color: #ffffff !important;
}

/* SECONDARY BUTTON HOVER */

.ai-service-btn-secondary:hover {
    background: transparent !important;
    border-color: #EB5145 !important;
    color: #ffffff !important;
}

/* CTA CARD */
.ai-service-cta-card {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ARROW */
.ai-service-btn-primary span,
.ai-service-btn-secondary span,
.ai-services-main-btn span {
    transition: transform 0.3s ease;
}

.ai-service-btn-primary:hover span,
.ai-service-btn-secondary:hover span,
.ai-services-main-btn:hover span {
    transform: translateX(4px);
}

/* =========================================
   LARGE LAPTOP
========================================= */

@media (max-width: 1200px) {

    .ai-services-heading {
        font-size: 3.2rem;
    }

    .ai-service-title {
        font-size: 1.7rem;
    }

    .ai-service-card,
    .ai-service-cta-card {
        padding: 38px;
    }

}

/* =========================================
   TABLET
========================================= */

@media (max-width: 992px) {

    .ai-services-grid {
        grid-template-columns: 1fr;
    }

    .ai-services-heading {
        font-size: 2.8rem;
    }

    .ai-service-title {
        font-size: 1.5rem;
    }

}

/* =========================================
   USECASE SECTION
========================================= */
.solutions-services-page .usecase-solutions-section .hero-industries-buttons .btn.primary {
    color: #fff;
    border: none;
    border-radius: 0;
    justify-content: center;
    transition: all 0.4s ease;
}

.solution-phone-stack,
.ide-mockup-container,
.qe-dashboard-wrap,
.industry-ai-wrap,
.ai-cost-dashboard {
    width: 100%;
    max-width: 560px;
    position: relative;
    margin: 0 auto;
}

.solution-phone-stack {
    min-height: 472px;
}

.ide-mockup-container {
    min-height: 472px;
}

.qe-dashboard-wrap {
    min-height: 472px;
}

.industry-ai-wrap {
    min-height: 472px;
}

.ide-frame,
.qe-dashboard-shell,
.industry-ai-shell {
    width: 100%;
}


/*.usecase-solutions-section{
    width: 100%;
    background: #fff;
    padding: 81px 20px 81px;
}*/
.usecase-solutions-section {
    width: 100%;
    background: #fff;
    padding: 81px 20px 20px;
    position: relative;
    overflow: hidden;
}

.glow {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.glow-left {
    width: 720px;
    height: 820px;

    top: -100px;
    left: -220px;
}

.glow-right {
    position: absolute;
    top: 120px;
    right: -180px;

    width: 800px;
    height: 800px;
}

.glow-center {
    position: absolute;
    width: 900px;
    height: 900px;
    left: 50%;
    top: 59%;
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

.usecase-solutions-section .section-container {
    position: relative;
    z-index: 2;
}

.usecase-solutions-section .hero-industries-buttons .btn {
    min-width: 226px;
    height: 50px;

    padding: 0 24px;

    white-space: nowrap;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* CONTAINER */
.usecase-solutions-container {
    width: 100%;
    max-width: 1350px;

    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/*HEADER*/

.usecase-solutions-header {
    text-align: center;
    margin-bottom: 20px;
}

.usecase-solutions-heading {
    font-size: 44px;
    font-weight: 700;

    color: #B3B3B3;

    margin-bottom: 18px;
}

.usecase-solutions-heading span {
    color: #000000;
    /*        font-size: 44px;*/
    font-size: 42px;
    font-weight: 700;

}

.usecase-solutions-subheading {
    max-width: 760px;

    margin: 0 auto;
    font-weight: 500;
    font-size: 18px;
    /*    font-size: 20px;*/
    line-height: 1.3;

    color: #000;
}

/* =========================================
   ROW 1
========================================= */

/*.solution-showcase-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 90px;
*//*    margin-bottom: 40px;*//*
}*/
.solution-showcase-row {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 90px;
    align-items: start;
    border-radius: 0px;
}

/* REVERSE ROW */
.solution-row-reverse {
    flex-direction: row-reverse;
}

/*IMAGE*/
/*
.solution-showcase-image{
    flex: 1;
}*/
/*.solution-showcase-image{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    min-height:var(--solution-card-height);
}
*/
.solution-showcase-image > img {
    width: 100%;
    max-width: 560px;

    display: block;
    margin: 0 auto;
}

.solution-showcase-image {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/*
.solution-showcase-content{
    padding-top:20px;
}*/
/*CONTENT*/

.solution-showcase-content {
    flex: 1;
    max-width: 540px;
}

/* TITLE */
.solution-showcase-title {
    /*  font-size: 34px;   */
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
    margin-bottom: 15px;
    margin-top: 20px;
}

.row-2 .solution-showcase-title {
    max-width: 400px;
}

.row-4 .solution-showcase-title {
    margin-top: 36px;
}

.row-5 .solution-showcase-title {
    margin-top: 12px;
    max-width: 268px;

}

/* DESCRIPTION */
.solution-showcase-description {
    font-size: 15px;
    line-height: 1.3;
    color: #000;
    margin-bottom: 14px;
    max-width: 466px;
}

/* SMALL TITLE */
.solution-showcase-list-title {
    /*  font-size: 23px;*/
    font-size: 21px;
    font-weight: 700;

    color: #000000;

    margin-bottom: 15px;
}

/*LIST*/

.solution-showcase-list {
    list-style: none;

    margin-bottom: 40px;
}

/*.solutions-services-page .stats-bar{
    margin-top: 0;
}*/
.solution-showcase-list li {
    padding: 4px 0;

    font-size: 15px;
    font-weight: 500;

    text-transform: capitalize;
    font-style: italic;

    color: #444444;

    position: relative;

    padding-left: 10px;

}

.solution-showcase-list li::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;


    width: 70%;

    height: 1px;

    background: #D7D5D5;
}

.solution-showcase-list li:first-child::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 70%;

    height: 1px;

    background: #D7D5D5;
}

.solution-showcase-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.solution-showcase-list li img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/*BUTTONS*/
.usecase-solutions-section .hero-industries-buttons .primary {
    background: #EB5145;
    color: #fff;
}

.usecase-solutions-section,
.hero-industries-buttons,
.secondary {
    /*    background: #fff;*/
    /*    border: 1px solid #000;*/
    color: #000;
}

/*.usecase-solutions-section,
.hero-industries-buttons,
.secondary::before,

.usecase-solutions-section,
.hero-industries-buttons,
.secondary::after{
    display: none;
}*/


/* BUTTONS */
.usecase-solutions-section .hero-industries-buttons .btn.secondary {
    background: #fff;
    color: #000;
}

.usecase-solutions-section .hero-industries-buttons .btn.secondary::before,
.usecase-solutions-section .hero-industries-buttons .btn.secondary::after {
    display: none !important;
    content: none !important;
}

.solution-phone-stack {
    position: relative;

    /*    width: 100%;
        max-width: 520px;
        height: 520px;*/

    margin: 0 auto;
}

/* COMMON */
.solution-phone-stack img {
    position: absolute;
    left: 50%;

    transition: transform 0.3s ease;
}

.phone-top {
    z-index: 2;

    top: 37px;

    transform: translateX(-62%) rotate(0deg);

    opacity: 0;
}

.phone-bottom {
    z-index: 1;
    top: 139px;
    transform: translateX(-62%) rotate(0deg);
    opacity: 0;
}

/*WHEN ACTIVE*/

.solution-phone-stack.animate .phone-bottom {
    animation: bottomFall 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.solution-phone-stack.animate .phone-top {
    animation: topFall 4.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;

    animation-delay: 0.35s;
}

/*KEYFRAMES*/

@keyframes bottomFall {

    0% {
        opacity: 0;

        transform: translate(-52%, -220px) rotate(0deg);
    }

    100% {
        opacity: 1;

        transform: translate(-52%, 0) rotate(0deg);
    }
}

@keyframes topFall {

    0% {
        opacity: 0;

        transform: translate(-52%, -320px) rotate(0deg);
    }

    100% {
        opacity: 1;

        transform: translate(-52%, 0) rotate(0deg);
    }
}

/* =========================================
   row 2 animation
========================================= */

/* CONTAINER SETUP */
.ide-mockup-container {
    position: relative;
    /*    width: 100%;
        max-width: 520px;
        height: 420px;*/
    margin: 0 auto;
}

/*.ide-frame {
    position: relative;
*//*    width: 100%;
    max-width: 620px;
    height: 431px;*//*
    background: #F8F8F8;
    border: 1px solid #E5E7F0;
    border-radius: 34px;
    padding: 30px 42px 24px 30px;
    overflow: visible;
}*/
.ide-frame {
    position: relative;
    background: #F8F8F8;
    border: 1px solid #E5E7F0;
    border-radius: 34px;
    padding: 30px 42px 47px 30px;
    overflow: visible;
    backdrop-filter: blur(40px);

    box-shadow: 0px 20px 60px -10px #60A5FA66;

    /*    box-shadow: 0px 0px 10px 0px #FFFFFF1A;*/

}

/* IDE WINDOW */
/*.ide-window {
    background: #FFF;
    border-radius: 20px;
    height: 370px;
    width: 434px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}*/
.ide-window {
    position: relative;
    width: 434px;
    height: 370px;

    background: url("images/solutions/ide-window.png") center center / cover no-repeat;

    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

/*.ide-header {
*//*   background: rgba(0, 0, 0, 1); *//*
   padding: 14px 20px;
    background: rgba(0, 0, 0, 0.15); *//* Transparent so blur is visible *//*

       backdrop-filter: blur(28px);
       -webkit-backdrop-filter: blur(28px);

       box-shadow: 0px 10px 24px -8px rgba(0, 0, 0, 0.2);
   }*/
.ide-header {
    position: relative;
    padding: 23px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: 0px 10px 24px -8px rgba(0, 0, 0, .2);
    overflow: hidden;
}

.ide-header::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 0.62px;
    border-radius: inherit;

    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, .22) 0%,
            rgba(255, 255, 255, 0) 100%
    );

    -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

/*.ide-header .dots span {
    height: 10px; width: 10px; border-radius: 50%;
    display: inline-block; margin-right: 8px;
    background: rgba(255,255,255,0.4);
}*/

.ide-content {
    padding: 30px;
    position: relative;
}

/* SEQUENTIAL TYPING */
.typing-container {
    position: relative;
    z-index: 2;
}


.code-quality-label {
    color: #FFFFFFB3;
    font-size: 11px;
    font-weight: 400;
}

/* Animation trigger for lines */
.animate .l1 {
    animation: typing 0.8s steps(30) forwards 0.5s;
}

.animate .l2 {
    animation: typing 0.8s steps(30) forwards 1.3s;
}

.animate .l3 {
    animation: typing 0.5s steps(20) forwards 2.1s;
}

.animate .l4 {
    animation: typing 0.5s steps(20) forwards 2.6s;
}

.animate .l5 {
    animation: typing 0.5s steps(20) forwards 3.1s;
}

.animate .l6 {
    animation: typing 0.5s steps(20) forwards 3.6s;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* METRICS CARD */
/*.metrics-card {
    position: absolute;
    right: 9px;
    top: 132px;
    width: 192px;
    height: 282px;
    padding: 24px;
    background: white;
    border-radius: 24px;
    border: 1.05px solid #E1E4EF;
    opacity: 0;
    transform: translateX(40px);
    overflow: hidden;
    z-index: 3;
    transition: none;
}*/
.metrics-card {
    position: absolute;
    right: 9px;
    top: 132px;
    width: 192px;
    height: 295px;
    padding: 24px;
    /*    background: white;*/
    border-radius: 24px;
    border: 1.05px solid #E1E4EF;
    opacity: 0;
    transform: translateX(40px);
    overflow: hidden;
    z-index: 3;
    transition: none;
    background: #FFFFFF1A;
    border: 1px solid #FFFFFF1F;
}

.animate .metrics-card {
    animation: slideIn 0.8s ease forwards 1.5s;

}

.metrics-card h4 {
    font-size: 17px; /*margin-bottom: 8px;*/
    color: #fff;
    font-weight: 500;
}

.metrics-card hr { /*border: 1.05px solid #444444; */
    margin: 12px 0;
    border: 1.05px solid #FFFFFF
}

.pct-val {
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    display: block; /*margin-top: 5px; */
}

.speed-val {
    font-size: 17px;
    font-weight: 600;
    color: #FFFFFF;
    padding-bottom: 7px;
}

.bug-val {
    font-size: 17px;
    font-weight: 600;
    color: #FFFFFF;
}

.ai-tag {
    color: #FF0000;
    font-size: 16px;
    font-weight: 500;
}

.ai-star {
    background: linear-gradient(
            180deg,
            #F5C169 0%,
            #FF0000 27.4%,
            #FF0000 74.52%,
            #F07A31 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    display: inline-block;
    margin-right: 6px;
}

.ai-para {
    font-weight: 300;
    font-size: 13px;
    max-width: 316px;
    color: #FFFFFFCC;


}

.ship-speed-label {
    color: #FFFFFFB3;
    font-size: 11px;
    font-weight: 400;
}

.bug-rate-label {
    color: #FFFFFFB3;
    font-size: 11px;
    font-weight: 400;
    border-top: 1.05px solid #FFFFFF1A;
    /*  border-top: 1.05px solid #F6F6F6;*/
    padding-top: 7px;
    /*      margin-top: 14px;*/
}

bug-val {
    font-size: 17px;
    font-weight: 600;
    color: #252525
}

/* QUALITY BAR ANIMATION */
.progress-bar {
    height: 6px;
    background: #f0f0f0;
    border-radius: 10px;
    margin: 8px 0;
    overflow: hidden;
}

.quality-fill {
    width: 0% !important; /* Force start at 0 */
    height: 100%;
    background-color: rgba(255, 153, 51, 0.3);
    /* Use transition for a smoother fill that syncs with your counter */
    transition: width 2s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: 2s; /* Matches your JavaScript counter delay */
}

/* 2. Trigger the fill when the 'animate' class is added by JS */
.animate .quality-fill {
    width: 85% !important;
}

/*.predict-highlight{
    display: inline-block;
    background: rgba(0, 0, 0, 1);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    line-height: 1;
    width: 244px;
    font-size: 13px;
    font-weight: 300;

}*/
.predict-highlight {
    position: relative;
    display: inline-flex;
    align-items: center;

    width: 244px;
    height: 25px;

    padding: 0 12px;

    color: #fff;
    font-size: 13px;
    font-weight: 300;

    border-radius: 4px;
    overflow: hidden;

    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0) 100%
    );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0px 8px 18px -10px rgba(255, 255, 255, 0.1);
}

/* THE WAVES (High Fidelity) */
.wave-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px; /* smaller */
    overflow: hidden;
    border-radius: 0 0 24px 24px;
    z-index: 0;
    pointer-events: none;
}

/* COMMON */
.wave-one,
.wave-two {
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 500%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: 25% 100%;
}

/* MAIN GOLD WAVE */
.wave-one {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 120'%3E%3Cpath fill='%23FF9933' d='M0,105 C120,105 120,5 200,5 C280,5 280,105 400,105 C520,105 520,5 600,5 C680,5 680,105 800,105 L800,120 L0,120 Z'/%3E%3C/svg%3E");

    opacity: 0.45;
    animation: moveWaveSmooth 10s linear infinite;
    z-index: 2;
}

/* BACK LIGHT WAVE */
.wave-two {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 120'%3E%3Cpath fill='%23CDA342' d='M0,108 C120,108 120,38 200,38 C280,38 280,108 400,108 C520,108 520,38 600,38 C680,38 680,108 800,108 L800,120 L0,120 Z'/%3E%3C/svg%3E");

    opacity: 0.12;
    animation: moveWaveSmooth 16s linear infinite reverse;
    z-index: 1;
}

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


@keyframes fillBar {
    to {
        width: 85%;
    }
}

/*animation AI SUGGESTION*/

.ai-suggestion {
    position: absolute;
    bottom: 56px;
    left: 49px;
    width: 400px;
    height: 109px;
    padding: 18px;
    border-radius: 20px;
    border: 1.24px solid transparent;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
    border: 1px solid;
    border-image-source: linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(24px);
    box-shadow: 0px 14px 28px -10px #0000002E;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

/* Triggered State */
.animate .ai-suggestion {
    animation: slideUp 0.6s ease forwards 0.5s;
}

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

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/*@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }*/
@keyframes fillBar {
    to {
        width: 85%;
    }
}


/* BACKGROUND DECORATION LINES */
.bg-lines {
    position: absolute;
    top: 60px;
    left: 30px;
    z-index: 1;
    opacity: 0.5;
}

.bg-line {
    height: 12px;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 15px;
}

.bg-line:nth-child(1) {
    width: 300px;
}

.bg-line:nth-child(2) {
    width: 250px;
}

.bg-line:nth-child(3) {
    width: 200px;
}

/* TYPING LINES - High Visibility */
.typing-container {
    position: relative;
    z-index: 10;
}

/*.typing-container .line {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #FFF;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    margin-bottom: 0px;
}*/
/*.typing-container .typing-line {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #FFF;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    margin-bottom: 0;
}*/
.typing-line {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #FFF;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    margin-bottom: 0;
}

/* WAVE BOX FIX */
.wave-box {
    position: absolute;
    bottom: -5px; /* Pull down slightly to sit on bottom */
    left: 0;
    width: 100%;
    height: 60px;
    pointer-events: none;
    z-index: 1;
}

@keyframes dotFill1 {
    0% {
        background: rgba(80, 80, 80, 1);
    }
    100% {
        background: rgba(80, 80, 80, 1);
    }
}

@keyframes dotFill2 {
    0% {
        background: rgba(80, 80, 80, 1);
    }
    100% {
        background: rgba(175, 175, 175, 1);
    }
}

@keyframes dotFill3 {
    0% {
        background: rgba(80, 80, 80, 1);
    }
    100% {
        background: rgba(255, 255, 255, 1);
    }
}

/*.ide-header .dots span {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    background: rgba(80, 80, 80, 1);
}

.animate .ide-header .dots span:nth-child(1) {
    animation: dotFill1 0.7s ease forwards;
    animation-delay: 0.3s;
}
.animate .ide-header .dots span:nth-child(2) {
    animation: dotFill2 0.7s ease forwards;
    animation-delay: 1.0s;
}
.animate .ide-header .dots span:nth-child(3) {
    animation: dotFill3 0.7s ease forwards;
    animation-delay: 1.7s;
}*/

.ide-header .dots {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ide-header .dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    margin: 0;
    background: #555;
}

@keyframes dotFill1 {
    from {
        background: #555;
    }
    to {
        background: #FF8579;
    }
}

@keyframes dotFill2 {
    from {
        background: #555;
    }
    to {
        background: #E9C371;
    }
}

@keyframes dotFill3 {
    from {
        background: #555;
    }
    to {
        background: #26B326;
    }
}

.animate .ide-header .dots span:nth-child(1) {
    animation: dotFill1 .7s ease forwards .3s;
}

.animate .ide-header .dots span:nth-child(2) {
    animation: dotFill2 .7s ease forwards 1s;
}

.animate .ide-header .dots span:nth-child(3) {
    animation: dotFill3 .7s ease forwards 1.7s;
}

/* =========================================
   Row 3 QE DASHBOARD
========================================= */

.qe-dashboard-wrap {
    flex: 1;
}

.qe-dashboard-shell {
    position: relative;
    /*    width: 100%;
        max-width: 530px;
        height: 431px;*/
    margin: 0 auto;
    border-radius: 24px;
    background: #FFFFFF;

    border-radius: 34px;
    padding: 30px 42px 30px 42px;
    /*    border: 1.5px solid #FF0000;*/
    backdrop-filter: blur(40px);

    /*    box-shadow: 0px 0px 24px 0px #FFFFFF1A;*/

    box-shadow: 0px 16px 48px -12px #FF41321F;

}

.qe-bg-left-img {
    position: absolute;
    width: 337px;
    height: 324px;
    left: -1px;
    top: 78px;
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
}

.qe-bg-right-img {
    position: absolute;
    width: 175px;
    height: 222px;
    right: -32px;
    top: 118px;
    opacity: 0.10;
    z-index: 1;
    pointer-events: none;
}

/* MAIN PANEL */

.qe-dashboard-panel {
    position: relative;
    height: 375px;
    width: 428px;
    background: linear-gradient(170.58deg, #AB0000 12.84%, #560000 92.34%);

    border-radius: 24px;
    padding: 31px 32px 15px 27px;
    overflow: hidden;
    position: relative;
    z-index: 3;
    box-shadow: 0 0 0 7.14px rgba(255, 255, 255, 0.43);
}


/* TITLE */

.qe-dashboard-title {
    font-size: 20px;
    font-weight: 500;

    color: #FFF;
    margin-bottom: 15px;
}

/* TOP STATS */

.qe-stat-grid {
    display: flex;
    gap: 28px;
    margin-bottom: 15px;
}

.qe-mini-stat {
    width: 89px;
    height: 67px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 10px 10px;
    text-align: center;
}

.qe-stat-number {
    font-size: 16px;
    font-weight: 600;
    color: #FFF;
}

.qe-stat-label {
    font-size: 10px;
    color: #CECECE;
    font-weight: 400;

}

/* GRAPH */

.qe-graph-card {
    width: 100%;
    height: 120px;

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 18px;

    padding: 18px;
    margin-bottom: 15px;
}

.qe-graph-title {
    color: #F5F5F5;
    font-size: 12px;
    margin-bottom: 28px;
}

.qe-graph-line {
    /*    width: 0%;

        height: 2px;

        background: #FF6B6B;

        border-radius: 24px;*/

    width: 0%; /* Initial state */
    height: 38px; /* Adjusted to match Figma mockup height */
    background: linear-gradient(90deg, rgba(235, 81, 69, 0.2) 0%, #EB5145 100%);
    border-radius: 4px;
    transition: width 2s ease-out; /* Smooth fill over 2 seconds */
}

/* Triggered by JS */
.animate .qe-graph-line {
    width: 100%;
}

/* TEST LIST */

.qe-test-title {
    color: #F5F5F5;
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: 400;
}

.qe-test-list {
    list-style: none;
    padding-left: 0;
}

.qe-test-list li {
    position: relative;
    padding-left: 18px;
}

.qe-test-list li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 8px;
    height: 8px;

    background: white;
    border-radius: 50%;

    transform: translateY(-50%);
}


.qe-test-list li {
    color: rgba(245, 245, 245, 1);
    font-size: 12px;

    margin-bottom: 5px;
}

/* SCORE CARD */

.qe-score-card {
    position: absolute;
    /* top: 84px; */
    top: 168px;
    right: 10px;
    width: 192px;
    height: 261px;
    background: #E7E7E71A;
    border-radius: 24px;
    padding: 20px;
    border: 0.77px solid #0000001F;
    z-index: 4;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out 0.5s;
}

.animate .qe-score-card {
    opacity: 1;
    transform: translateY(0);
}

.qe-score-title {
    font-size: 18px;
    color: #fff;
    font-weight: 500;

}

.qe-score-card hr {
    margin-bottom: 10px;
}

.qe-grade {
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    color: #FF9933;
    line-height: 1;
}

.qe-grade-sub {
    text-align: center;
    font-size: 12px;
    color: #FFFFFF;
    margin-bottom: 15px;
    font-weight: 400;
    max-width: 150px;
    text-align: center;
}

.qe-span {
    font-weight: 400;
    font-size: 12px;
    color: #E4E4E4;
}

.qe-score-row strong {
    color: #808080;
}

.qe-score-item {
    margin-bottom: 22px;
}

.qe-score-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 14px;
    /* gap: 40px; */
    max-width: 139px;
}

.qe-progress {
    width: 142px;
    height: 8px;
    background: #DBDBDB;

    border-radius: 4px;

    overflow: hidden;
}

.qe-progress-fill {
    /*    width: 0%;

        height: 100%;

        background: #CDA342;

        border-radius: inherit;*/
    width: 0%; /* Start at 0 */
    height: 100%;
    border-radius: inherit;
    transition: width 1.5s cubic-bezier(0.1, 0.5, 0.5, 1);
}

/* Target values from your HTML/Figma */
.animate .security-fill {
    width: 98% !important;
    background: #008000; /* As seen in your Risk Score screenshot */
}

.animate .performance-fill {
    width: 94% !important;
    background: #000080; /* As seen in your Risk Score screenshot */
}

.qe-graph-container {
    width: 100%;
    height: 95px;
    margin-top: -27px;
    overflow: hidden;

    position: relative;
}

.qe-svg-graph {
    width: 66%;
    height: 100%;

    display: block;
}

@media (min-width: 400px) and (max-width: 480px) {
    .qe-svg-graph {
        width: 71% !important;
    }

}

@media (min-width: 500px) and (max-width: 526px) {
    .qe-svg-graph {
        width: 68% !important;
    }

}

@media (min-width: 520px) and (max-width: 576px) {
    .qe-svg-graph {
        width: 70% !important;
    }

}

.graph-fill,
.graph-line,
.graph-dot {
    transform: translateY(-8px);
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Animate state: Reveal color and width */
.animate .graph-fill,
.animate .graph-line,
.animate .graph-dot {
    opacity: 1; /* Transitions from transparent to themed color */
}

/* Initial state of the mask */
.graph-mask {
    width: 0;
    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Trigger state when visible */
.animate .graph-mask {
    width: 281px;
}

/* Security and Performance Bars Reset */
.qe-progress-fill {
    width: 0% !important;
    transition: width 1.5s ease-out;
}

.animate .security-fill {
    width: 98% !important;
    background: #D9D9D9;
    border: 1px solid #DBDBDB;

}

.animate .performance-fill {
    width: 94% !important;
    background: #EA580C;
    border: 1px solid #DBDBDB;
}


/* =========================================
   Row 4 INDUSTRY AI CARD
========================================= */

.industry-ai-wrap {
    position: relative;

    /*    width: 100%;
        max-width: 620px;

        min-height: 560px;*/

    overflow: visible;
}

.industry-ai-panel {
    height: auto;
    /*    min-height: 560px;*/

    overflow: visible;
}

.industry-ai-shell {
    position: relative;

    /*    width: 100%;
        height: 451px;*/

    border-radius: 34px;

    background: #F4F4F4;

    border: 1px solid #E5E7F0;

    padding: 25px 36px 25px 36px;

    overflow: hidden;

}

.industry-ai-image {
    width: 28px !important;
    height: 28px !important;

    max-width: 28px !important;
    min-width: 28px !important;

    flex: 0 0 28px;

    object-fit: contain;

    display: block;
}

/* WAVES AREA */
.industry-ai-waves {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 200px;

    overflow: hidden;

    z-index: 1;

    pointer-events: none;
}

.industry-ai-waves svg {
    position: absolute;

    left: 50%;
    bottom: 0;

    width: 140%;
    /*    height: 100%;*/

    transform: translateX(-50%);

    display: block;

    will-change: transform;
}

/* BACK WAVE */
.wave-back {
    bottom: 72px;

    animation: waveMoveBack 18s linear infinite;
}

/* MIDDLE WAVE */
.wave-middle {
    bottom: 38px;

    animation: waveMoveMiddle 14s linear infinite;
}

/* FRONT WAVE */
.wave-front {
    bottom: 0;

    animation: waveMoveFront 10s linear infinite;
}

/* BACK */
@keyframes waveMoveBack {

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

    25% {
        transform: translateX(-48%) translateY(4px);
    }

    50% {
        transform: translateX(-46%) translateY(0px);
    }

    75% {
        transform: translateX(-48%) translateY(-4px);
    }

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

/* MIDDLE */
@keyframes waveMoveMiddle {

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

    25% {
        transform: translateX(-52%) translateY(-5px);
    }

    50% {
        transform: translateX(-54%) translateY(0px);
    }

    75% {
        transform: translateX(-52%) translateY(5px);
    }

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

/* FRONT */
@keyframes waveMoveFront {

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

    25% {
        transform: translateX(-47%) translateY(5px);
    }

    50% {
        transform: translateX(-44%) translateY(0px);
    }

    75% {
        transform: translateX(-47%) translateY(-5px);
    }

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

/* MAIN CARD */

.industry-ai-dashboard {
    position: relative;
    z-index: 3;

    width: 470px;
    height: 390px;

    border-radius: 24px;

    /*    background: #FFF;*/

    overflow: hidden;

    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);

    transform: translateY(40px);

    opacity: 0;
    background: rgba(255, 255, 255, 0.1);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.9s ease;
}

/* VIEWPORT ACTIVE */

.industry-ai-wrap.animate .industry-ai-dashboard {
    transform: translateY(0);
    opacity: 1;
}

/* HEADER */

.industry-ai-header {
    height: 60px;

    background: #000000;

    color: white;

    font-size: 20px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* LIST */

.industry-ai-list {
    display: flex;
    flex-direction: column;

    gap: 5px;
    padding: 10px 10px 0px 25px;
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.industry-ai-item {
    display: flex;
    align-items: center;
    gap: 10px;


    opacity: 1;

    transform: translateX(120%);
    will-change: transform;

    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.industry-ai-content {
    display: flex;
    align-items: center;
    gap: 14px;

    background: #FFFFFF;

    border: 2.47px solid rgba(255, 255, 255, 0.28);

    border-radius: 16px;

    padding: 0px 0px;

    width: 100%;
}

.industry-ai-wrap.animate .industry-ai-item:nth-child(1) {
    transform: translateX(0);
    transition-delay: 0.1s;
}

.industry-ai-wrap.animate .industry-ai-item:nth-child(2) {
    transform: translateX(0);
    transition-delay: 0.45s;
}

.industry-ai-wrap.animate .industry-ai-item:nth-child(3) {
    transform: translateX(0);
    transition-delay: 0.8s;
}

.industry-ai-wrap.animate .industry-ai-item:nth-child(4) {
    transform: translateX(0);
    transition-delay: 1.15s;
}

.industry-ai-wrap.animate .industry-ai-item:nth-child(5) {
    transform: translateX(0);
    transition-delay: 1.5s;
}

@keyframes industryItemReveal {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.industry-ai-icon {
    width: 10px;
    min-width: 10px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.industry-ai-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.industry-ai-text h5 {
    font-size: 13px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 4px;
}

.industry-ai-text p {
    font-size: 9px;
    color: #37485C;
    font-weight: 400;
    margin-bottom: 0px;
}

/* FLOAT CARD */

.industry-score-card {
    position: absolute;

    right: 10px;
    top: 95px;

    width: 191px;
    height: 300px;

    background: white;

    border-radius: 24px;

    border: 1px solid #E5E7F0;

    padding: 14px;

    z-index: 5;

    opacity: 0;
    transform: translateY(40px);

    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease;
}

.industry-ai-wrap.animate .industry-score-card {
    opacity: 1;
    transform: translateY(0);
}

.industry-score-card h4 {
    font-size: 15px;
    font-weight: 500;
    text-align: center;

    margin-bottom: 10px;
}

.industry-score-card hr {
    margin-bottom: 10px;
}


/* DONUT */

.industry-chart {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.industry-chart-ring {
    position: relative;
    width: 112px;
    height: 112px;

}

/* INNER WHITE CIRCLE */
.industry-chart-ring::after {
    content: "";

    position: absolute;

    inset: 20px;

    background: white;

    border-radius: 50%;

    z-index: 1;
}

.industry-chart-center {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Let clicks pass straight through */
}

.industry-chart-center strong {
    font-size: 16px;
    color: #252525;
    font-weight: 700;
    line-height: 1.2;
}

.industry-chart-center span {
    font-size: 9px;
    color: #252525;
    letter-spacing: 0.3px;
}

/* LEGEND */

.industry-legend {
    list-style: none;
}

.industry-legend li {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 3px;
    color: #252525;
    font-size: 12px;
}

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

.red {
    background: #F05345;
}

.orange {
    background: #E4A53B;
}

.green {
    background: #53B87A;
}

.blue-b {
    background: #2B2EF5;
}

.purple {
    background: #7234F5;
}


/* --- NEW ARC SEGMENT ANIMATIONS --- */

/* 1. Base State: Set the transform origin to the center of the SVG so they scale out from the middle */
.segment-purple,
.segment-blue,
.segment-red,
.segment-yellow,
.segment-green {
    opacity: 0;
    transform: scale(0.6);
    transform-origin: 56px 56px; /* Exactly center of your 112x112 SVG */
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), /* Smooth overshoot/elastic effect */ opacity 0.6s ease,
    filter 0.4s ease;
}

/* 2. Animation Trigger State */
.industry-ai-wrap.animate .segment-purple,
.industry-ai-wrap.animate .segment-blue,
.industry-ai-wrap.animate .segment-red,
.industry-ai-wrap.animate .segment-yellow,
.industry-ai-wrap.animate .segment-green {
    opacity: 1;
    transform: scale(1);
    /* Utilizes the delays assigned below */
    transition-delay: var(--delay);
}

/* 3. Staggered Delays for Each Arc (Sequence Timing) */
.segment-purple {
    --delay: 0.2s;
}

.segment-blue {
    --delay: 0.4s;
}

.segment-red {
    --delay: 0.6s;
}

.segment-yellow {
    --delay: 0.8s;
}

.segment-green {
    --delay: 1.0s;
}


/* 4. OPTIONAL: Premium Hover/Highlight Effect */
/* When a user hovers over an arc, it grows slightly and activates the filter glows you already have defined in your SVG! */
.industry-chart-ring svg path[class^="segment-"]:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.segment-purple:hover {
    filter: url(#glow-purple);
}

.segment-blue:hover {
    filter: url(#glow-blue);
}

.segment-red:hover {
    filter: url(#glow-red);
}

.segment-yellow:hover {
    filter: url(#glow-yellow);
}

.segment-green:hover {
    filter: url(#glow-green);
}

/* Keep the inner text untouched by clicks */
.industry-chart-center {
    pointer-events: none;
}


.industry-legend li {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.industry-ai-wrap.animate .industry-legend li {
    opacity: 1;
    transform: translateX(0);
}

/* Match the item delays with the chart segments */
.industry-legend li:nth-child(1) {
    transition-delay: 0.2s;
}

/* Purple */
.industry-legend li:nth-child(2) {
    transition-delay: 0.4s;
}

/* Blue */
.industry-legend li:nth-child(3) {
    transition-delay: 0.6s;
}

/* Red */
.industry-legend li:nth-child(4) {
    transition-delay: 0.8s;
}

/* Orange/Yellow */
.industry-legend li:nth-child(5) {
    transition-delay: 1.0s;
}

/* Green */

/* =========================================
   row 5 AI COST GOVERNANCE
========================================= */
.ai-cost-shell {
    position: relative;
    width: 100%;
    height: 100%;
    background: #E7E4E4;
    border: 1px solid #E1E4EF;
    border-radius: 34px;
    padding: 15px 6px 17px 60px;
    overflow: visible;
}

/*.ai-cost-dashboard{
    position: relative;
     height: 450px;
*//*    width: 100%;
    max-width: 560px;
    height: 560px;*//*
    margin: 0 auto;
}*/
.ai-cost-dashboard {
    position: relative;
    height: 443px;
    margin: 0 auto;
}

/* BACK PANEL */

.ai-cost-bg {
    position: absolute;
    inset: 0;
    border-radius: 34px;
    background: #E7E4E4;
    z-index: 1;
}

/* MAIN DASHBOARD */

.ai-cost-main {
    position: relative;
    width: 428px;
    height: 408px;
    background: #fff;
    border-radius: 24px;
    border: 1px solid #E6E6E6;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);
}

/* HEADER */

.ai-cost-header {
    height: 60px;
    background: #890000;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

/* BODY */

.ai-cost-body {
    padding: 15px 28px 28px 28px;
}

.ai-cost-value {
    font-size: 31px;
    font-weight: 600;
    color: #000;
    text-align: center;
    line-height: 1;
}

.ai-cost-sub {
    text-align: center;
    color: #AFAFAF;
    font-size: 11px;
    font-weight: 400;
    margin-top: 6px;
    margin-bottom: 5px;
}

/* GRAPH */

.ai-graph-card {
    width: 100%;
    height: 129px;
    background: #F7F8FB;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 8px;
}

.ai-graph-title {
    font-size: 11px;
    font-weight: 500;
    color: #000000;
    /*    margin-bottom: 14px;*/
}

.ai-graph-wrap {
    overflow: hidden;
}

.ai-cost-graph {
    width: 100%;
    height: auto;
    transform: translateY(3px);
}

/* STATS */

.ai-cost-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 5px;
}

.ai-stat-card {
    flex: 1;
    background: #F7F7F7;
    border-radius: 16px;
    padding: 10px 10px 10px 10px;
    text-align: center;
}

.ai-stat-card h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0px;
    color: #000;
}

.ai-stat-card span {
    font-size: 10px;
    color: #B0B0B0;
    font-weight: 400;
}

/* OPT CARD */

.ai-optimization-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ai-optimization-title {
    font-size: 11px;
    font-weight: 400;
    color: #0E0E0E;
    margin-bottom: 4px;
    margin-top: 10px;
}

.opt-bar {
    width: 6px;
    height: 30px;
    background: #4BA2E3;

}

.ai-optimization-card h5 {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 3px;
    color: #0E0E0E;
}

.ai-optimization-card p {
    font-size: 9px;
    color: #4D6179;
    font-weight: 400;
    margin: 0;
}

/* FLOATING CARD */

/*.utilization-card {
    position: absolute;
    left: -2px;
    top: 75px;
    width: 190px;
    background: #fff;
    border-radius: 24px;
    border: 1px solid #E3E3E3;
    padding: 10px 14px 4px 14px;
    z-index: 3;

        opacity: 0;
        transform: translateX(-120px);
        transition:
            transform 1s cubic-bezier(0.22,1,0.36,1),
            opacity 1s ease;
}*/
.utilization-card {
    position: absolute;
    left: 9px;
    top: 75px;
    width: 160px;
    background: #fff;
    border-radius: 24px;
    border: 1px solid #E3E3E3;
    padding: 10px 14px 4px 14px;
    z-index: 3;
    opacity: 0;
    transform: translateX(-120px);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease;
}

.ai-cost-dashboard.animate .utilization-card {
    opacity: 1;
    transform: translateX(0);
}

.utilization-card h3 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 15px;
    text-align: center;
}

/* UTIL ITEMS */

.util-item {
    margin-bottom: 5px;
}

.util-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 5px;
}

.util-row span {
    font-size: 10px;
    font-weight: 400;
    color: #252525;
}

.util-row strong {
    font-size: 11px;
    font-weight: 400;
    color: #252525;
}

/* BARS */

.util-progress {
    width: 100%;
    height: 10px;

    background: #E3E3E3;
    border-radius: 30px;

    overflow: hidden;
}

.util-fill {
    width: 0;
    height: 100%;
    border-radius: 30px;

    transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.gpu-fill {
    background: #2E60ED;
}

.cpu-fill {
    background: #05C801;
}

.memory-fill {
    background: #000080;
}

/* ACTIVE */

.ai-cost-dashboard.animate .gpu-fill {
    width: 85%;
}

.ai-cost-dashboard.animate .cpu-fill {
    width: 65%;
}

.ai-cost-dashboard.animate .memory-fill {
    width: 74%;
}

/* PREDICTIVE */

.predictive-card {
    background: #E9E9E9;
    border-radius: 14px;
    padding: 0px 1px 1px 1px;
    text-align: center;
    /*
        margin-top: 10px;*/
}

.predictive-card span {
    font-size: 10px;
    color: #252525;
    font-weight: 400;
}

.predictive-card h4 {
    /*    margin-top: 4px;*/
    font-size: 14px;
    font-weight: 400;
    color: #252525;
}

.predictive-title {
    font-size: 12px;
    font-weight: 400;
    color: #252525;
    /*    margin-bottom: 7px;*/
}

/* SAVED */

.saved-card {
    background: #000;
    border-radius: 14px;

    padding: 1px;
    text-align: center;

    margin-top: 4px;
}

.saved-card span {
    color: #FBFBFB;
    font-size: 10px;
    font-weight: 400;
}

.saved-card h4 {
    color: #05C801;
    font-size: 14px;
    /*    margin-top: 5px;*/
    font-weight: 400;
}

/* GRAPH ANIMATION */

.main-line,
.dash-line {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
}

.ai-cost-dashboard.animate .main-line {
    animation: drawGraph 2s ease forwards;
}

.ai-cost-dashboard.animate .dash-line {
    animation: drawGraph 2s ease forwards 0.3s;
}

.ai-cost-dashboard.animate .graph-reveal-rect {
    animation: revealGraph 2s ease forwards;
}

@keyframes drawGraph {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes revealGraph {
    to {
        width: 449px;
    }
}


/* =========================================
   FLEXIBLE ENGAGEMENT MODELS SECTION
========================================= */

.engagement-models-section {
    width: 100%;
    background: #fff;
    padding: 60px 18px 60px;
}

/* CONTAINER */
.engagement-models-container {
    width: 100%;
    max-width: 1250px;

    margin: 0 auto;
}

/* HEADER*/

.engagement-models-header {
    text-align: center;
    margin-bottom: 25px;
}

.engagement-models-title {
    font-size: 39px;
    font-weight: 700;
    line-height: 1.2;
    color: #B3B3B3;
    margin-bottom: 10px;
}

.engagement-models-title span {
    color: #000000;
}

.engagement-models-subtitle {
    font-size: 17.7px;
    color: #222222;

    max-width: 750px;
    margin: 0 auto;

    line-height: 1.7;
}

/*.engagement-divider {
    width: 50px;
    height: 2px;
    background: #000;
    margin-bottom: 15px;
    display: block;
}*/
.engagement-divider {
    width: 327px;
    height: 2px;
    border: 1px solid #989898;
    background-color: #FFFFFF;
    margin-bottom: 15px;
    display: block;
}

/* GRID*/

.engagement-models-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 0;
    align-items: stretch;
}

/* COLUMN */
.engagement-column {
    display: flex;
    flex-direction: column;
}

/*CARD COMMON*/

.engagement-card {
    position: relative;
    overflow: hidden;
    height: 240px;
    cursor: pointer;
}

.engagement-default {
    width: 100%;
    height: 100%;

    transition: opacity 0.35s ease;
}

.engagement-default img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.engagement-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.6s ease;
}

/* LARGE LEFT CARD */

.engagement-card-large {
    position: relative;
    overflow: hidden;
    background: #F5E7BB;
    min-height: 480px;
    padding: 35px 30px 20px 35px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* THE MOVING TITLE BLOCK */
.engagement-large-info {
    position: relative;
    z-index: 10;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.engagement-card-content {
    /*    max-width: 320px;*/
    width: 100%;
    height: 100%;

    position: relative;
}

.engagement-card-icon {
    width: 90px;
    margin-bottom: 10px;
}

.engagement-card-icon img {
    width: 100%;
    display: block;
}

.engagement-card-large h3 {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    color: #000000;
}

/*IMAGE CARDS*/

.engagement-card-image {
    /*    height: 410px;*/
    height: 240px;
    position: relative;
    overflow: hidden;
}

.engagement-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;

    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ZOOM */
.engagement-card-image:hover img {
    transform: scale(1.08);
}

/* OVERLAY */
.engagement-card-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.72),
            rgba(0, 0, 0, 0.25)
    );

    z-index: 2;

    transition: all 0.5s ease;
}

/* TEXT */
.engagement-card-text {
    position: absolute;
    left: 30px;
    bottom: 25px;
    z-index: 6; /* Higher than the hover panel */
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Move the EXISTING title to the top */
.engagement-card:hover .engagement-card-text {

    transform: translateY(-130px);
}

.engagement-card:hover img {
    transform: scale(1.08);
}

.engagement-card:hover .engagement-card-overlay {
    background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.82),
            rgba(0, 0, 0, 0.35)
    );
}

.engagement-btn {
    transition: all 0.35s ease;
}

.engagement-btn:hover {
    transform: translateY(-3px);
}

.engagement-card-text h3 {
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    color: #FFFFFF;

}

.engagement-hover-panel {
    position: absolute;
    inset: 0;
    padding: 80px 25px 20px;
    z-index: 5;
    transform: translateY(100%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);

    display: flex;
    flex-direction: column;
}

.engagement-hover-panel h3 {
    color: white;
}

/* 1. Move the SAME title to the top */
.engagement-card-large:hover .engagement-large-info {
    transform: translateY(-260px);
}

/* THE HOVER SLIDE-UP PANEL */
.engagement-large-hover {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 30px;
    z-index: 5;

    /* Initial state: Hidden and lower */
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);

    display: flex;
    flex-direction: column;

}

.engagement-large-hover h3 {
    transform: translateY(100%);

    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* HOVER EFFECT */

.engagement-large-default {
    width: 100%;

    transition: opacity 0.4s ease,
    transform 0.6s ease;
}

.engagement-card-large:hover .engagement-large-default {
    opacity: 0;

    transform: translateY(-40px);
}

.engagement-card-large:hover .engagement-large-hover {
    opacity: 1;
    transform: translateY(0);
}

.engagement-card-large:hover .engagement-large-hover h3 {
    transform: translateY(0);
}

.engagement-large-hover ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.engagement-large-hover li {
    color: #000;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
}

.engagement-hover-panel ul {
    padding-left: 20px;
    margin-bottom: 25px;
    margin-top: 10px;
}

.engagement-hover-panel li {
    color: white;
    font-size: 12px;
    font-weight: 300;
}

.engagement-btn {
    align-self: flex-start;
    margin-top: 10px;
    color: #000;
    background: #fff;
    padding: 15px 30px;
    font-weight: 300;
    font-size: 14px;
    text-decoration: none;
}

/*.solutions-services-page .hero-industries-buttons .btn.primary{
    color: #fff;
    border: none;
    border-radius: 0;
    justify-content: center;
    transition: all 0.4s ease;
}*/
.solutions-services-page .engagement-large-btn .btn.primary {
    min-width: 230px;
    padding: 15px 30px;
    font-size: 1rem;
}

.solutions-services-page .engagement-small-btn .btn.primary {
    width: fit-content;
    padding: 10px 22px;
    font-size: 0.95rem;
}

.solutions-services-page .hero-industries-buttons .btn-text {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.3px;
}

.solutions-services-page .hero-industries-buttons .btn.primary:hover {
    background: #EB5145;

    color: #FFFFFF;

    transform: translateY(-4px);
}

.engagement-card:hover .engagement-hover-panel {
    transform: translateY(0);
}


@media (min-width: 1281px) and (max-width: 1439px) {

    /* ── HERO SECTION ── */
    .solutions-services-section {
        height: 100vh; /*height: 480px;*/
        min-height: 480px;
    }

    .solutions-services-heading {
        font-size: 48px;
        line-height: 52px;
    }

    .solutions-services-heading span {
        font-size: 48px;
        line-height: 52px;
    }

    .solutions-services-subheading {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .solutions-services-description {
        font-size: 16px;
        max-width: 700px;
        margin-bottom: 44px;
        line-height: 1.55;
    }

    .solutions-services-section .hero-industries-buttons .btn {
        min-width: 236px;
        height: 52px;
        font-size: 14px;
    }

    /* ── AI SERVICES ── */
    .ai-services-section {
        padding: 84px 0px 0px;
    }

    /*
        .ai-services-container {
            max-width: 1380px;
        }
    */
    .ai-services-heading {
        font-size: 46px;
    }

    .ai-services-heading span {
        font-size: 46px;
    }

    .ai-services-subheading {
        font-size: 19px;
        max-width: 740px;
    }

    .ai-service-card,
    .ai-service-cta-card {
        padding: 42px;
    }

    .ai-service-title {
        font-size: 25px;
    }

    .ai-service-description {
        font-size: 14px;
    }

    .ai-service-tags span {
        font-size: 12px;
        padding: 8px 16px;
    }

    .ai-service-btn-primary,
    .ai-service-btn-secondary,
    .ai-services-main-btn {
        height: 45px;
        font-size: 14px;
        padding: 0 18px;
    }

    /* ── USECASE SOLUTIONS ── */
    /*    .usecase-solutions-section {
            padding: 100px 20px 84px;
        }*/
    .usecase-solutions-section {
        padding: 100px 20px 0px 84px;
    }

    /*    .usecase-solutions-container {
            max-width: 1310px;
            gap: 44px;
        }*/
    .usecase-solutions-container {
        max-width: 1310px;
        gap: 0px;
    }

    /*    .usecase-solutions-heading,
        .usecase-solutions-heading span {
            font-size: 44px;
            margin-bottom: 18px;
        }*/
    .usecase-solutions-heading, .usecase-solutions-heading span {
        font-size: 39px;
        margin-bottom: 18px;
    }

    /*    .usecase-solutions-subheading {
            max-width: 780px;
            font-size: 19px;
            line-height: 1.35;
        }*/
    .usecase-solutions-subheading {
        max-width: 716px;
        font-size: 18px;
        line-height: 1.35;
    }

    .solution-showcase-row {
        grid-template-columns: 1fr 1fr;
        gap: 80px;
    }

    /*    .solution-showcase-image > img {
            max-width: 540px;
        }*/
    .solution-showcase-image > img {
        max-width: 472px;
    }

    .solution-showcase-content {
        max-width: 560px;
    }

    .solution-showcase-title {
        font-size: 34px;
        margin-bottom: 14px;
        margin-top: 10px;
    }

    .row-5 .solution-showcase-title {
        max-width: 300px;
    }

    .solution-showcase-description {
        font-size: 15px;
        max-width: 480px;
        margin-bottom: 14px;
        line-height: 1.4;
    }

    .solution-showcase-list-title {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .solution-showcase-list {
        margin-bottom: 36px;
    }

    .solution-showcase-list li {
        font-size: 15px;
        gap: 12px;
        padding: 4px 0 4px 10px;
    }

    .solution-showcase-list li img {
        width: 20px;
        height: 20px;
    }

    /*    .phone-top {
            top: 38px;
        }*/
    .phone-top {
        top: 46px;
    }

    .phone-bottom {
        top: 142px;
    }

    .solution-phone-stack,
    .ide-mockup-container,
    .qe-dashboard-wrap,
    .industry-ai-wrap,
    .ai-cost-dashboard {
        max-width: 575px;
        min-height: 480px;
    }

    .ai-cost-dashboard {
        max-width: 530px;
        min-height: 480px;
    }

    /*    .usecase-solutions-section .hero-industries-buttons .btn {
            min-width: 232px;
            height: 50px;
            padding: 0 26px;
        }*/
    .usecase-solutions-section .hero-industries-buttons .btn {
        min-width: 232px;
        height: 44px;
        padding: 0 26px;
    }

    /* ── IDE MOCKUP ── */
    .ide-mockup-container {
        min-height: 480px;
    }

    /*    .ide-frame {
            border-radius: 36px;
            padding: 32px 44px 26px 32px;
        }*/
    .ide-frame {
        border-radius: 36px;
        padding: 10px 44px 10px 32px;
    }

    .ide-window {
        height: 382px;
        width: 454px;
        border-radius: 21px;
    }

    .ide-header {
        padding: 15px 21px;
    }

    .ide-content {
        padding: 32px;
    }

    .typing-container .line {
        font-size: 13px;
    }

    .predict-highlight {
        width: 254px;
        font-size: 13px;
        padding: 6px 12px;
    }

    /*    .metrics-card {
            right: 10px;
            top: 138px;
            width: 200px;
            height: 288px;
            padding: 25px;
            border-radius: 25px;
        }*/
    .metrics-card {
        right: 10px;
        top: 109px;
        width: 200px;
        height: 288px;
        padding: 25px;
        border-radius: 25px;
    }

    .metrics-card h4 {
        font-size: 17px;
    }

    .pct-val,
    .speed-val,
    .bug-val {
        font-size: 17px;
    }

    .code-quality-label,
    .ship-speed-label,
    .bug-rate-label {
        font-size: 11px;
    }

    .ai-suggestion {
        bottom: 58px;
        left: 52px;
        width: 414px;
        height: 112px;
        padding: 19px;
        border-radius: 21px;
    }

    .ai-tag {
        font-size: 16px;
    }

    .ai-para {
        font-size: 13px;
        max-width: 328px;
    }

    .bg-line:nth-child(1) {
        width: 308px;
    }

    .bg-line:nth-child(2) {
        width: 258px;
    }

    .bg-line:nth-child(3) {
        width: 210px;
    }

    /* ── QE DASHBOARD ── */
    .qe-dashboard-wrap {
        min-height: 480px;
    }

    /*
        .qe-dashboard-shell {
            border-radius: 36px;
            padding: 28px 44px 28px 44px;
        }
    */
    .qe-dashboard-shell {
        border-radius: 36px;
        padding: 10px 44px 13px 44px;
    }

    .qe-bg-left-img {
        width: 348px;
        height: 335px;
        top: 82px;
    }

    .qe-bg-right-img {
        width: 181px;
        height: 230px;
        right: -34px;
        top: 122px;
    }

    /*    .qe-dashboard-panel {
            height: 390px;
            width: 446px;
            padding: 32px 34px 16px 29px;
            border-radius: 25px;
        }*/
    /*    .qe-dashboard-panel {
            height: 369px;
            width: 446px;
            padding: 32px 34px 16px 29px;
            border-radius: 25px;
        }*/
    .qe-dashboard-panel {
        height: 385px;
        width: 446px;
        padding: 32px 34px 16px 29px;
        border-radius: 25px;
    }

    .qe-dashboard-title {
        font-size: 21px;
        margin-bottom: 16px;
    }

    .qe-stat-grid {
        gap: 30px;
        margin-bottom: 16px;
    }

    .qe-mini-stat {
        width: 92px;
        height: 70px;
        padding: 11px;
        border-radius: 17px;
    }

    .qe-stat-number {
        font-size: 16px;
    }

    .qe-stat-label {
        font-size: 10px;
    }

    .qe-graph-card {
        height: 124px;
        padding: 19px;
        border-radius: 19px;
        margin-bottom: 16px;
    }

    .qe-graph-title {
        font-size: 12px;
        margin-bottom: 28px;
    }

    .qe-graph-container {
        height: 97px;
    }

    .qe-test-title {
        font-size: 13px;
    }

    .qe-test-list li {
        font-size: 12px;
        padding-left: 18px;
    }

    .qe-test-list li::before {
        width: 8px;
        height: 8px;
    }

    /*    .qe-score-card {
            top: 88px;
            right: 11px;
            width: 200px;
            height: 314px;
            padding: 26px;
            border-radius: 25px;
        }*/
    /*    .qe-score-card {
            top: 78px;
            right: 11px;
            width: 200px;
            height: 291px;
            padding: 23px;
            border-radius: 25px;
        }*/
    .qe-score-card {
        top: 166px;
        right: 11px;
        width: 200px;
        height: 291px;
        padding: 23px;
        border-radius: 25px;
    }

    .qe-score-title {
        font-size: 18px;
    }

    .qe-grade {
        font-size: 50px;
    }

    .qe-grade-sub {
        font-size: 14px;
        max-width: 154px;
        margin-bottom: 16px;
    }

    .qe-span {
        font-size: 12px;
    }

    .qe-progress {
        width: 150px;
        height: 10px;
    }

    .qe-score-row {
        font-size: 14px;
        max-width: 146px;
    }

    .qe-score-item {
        margin-bottom: 20px;
    }

    /* ── INDUSTRY AI ── */
    .industry-ai-wrap {
        min-height: 480px;
    }

    /*    .industry-ai-shell {
            border-radius: 36px;
            padding: 26px 38px 26px 38px;
        }*/
    .industry-ai-shell {
        border-radius: 36px;
        padding: 10px 38px 10px 38px;
    }

    .industry-ai-waves {
        height: 208px;
    }

    /*    .industry-ai-dashboard {
            width: 484px;
            height: 404px;
            border-radius: 25px;
            box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);
        }*/
    .industry-ai-dashboard {
        width: 484px;
        height: 391px;
        border-radius: 25px;
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);
    }

    /*    .industry-ai-header {
            height: 62px;
            font-size: 21px;
        }*/
    .industry-ai-header {
        height: 52px;
        font-size: 20px;
    }

    /*    .industry-ai-list {
            gap: 5px;
            padding: 11px 11px 0px 26px;
        }*/
    .industry-ai-list {
        gap: 5px;
        padding: 5px 11px 0px 26px;
    }

    .industry-ai-content {
        gap: 15px;
        border-radius: 17px;
    }

    .industry-ai-icon {
        height: 58px;
    }

    .industry-ai-image {
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        min-width: 30px !important;
        flex: 0 0 30px;
    }

    .industry-ai-text h5 {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .industry-ai-text p {
        font-size: 9px;
    }

    /*   .industry-score-card {
           right: 11px;
           top: 100px;
           width: 200px;
           height: 314px;
           padding: 15px;
           border-radius: 25px;
       }*/
    .industry-score-card {
        right: 11px;
        top: 62px;
        width: 184px;
        height: 302px;
        padding: 15px;
        border-radius: 25px;
    }

    .industry-score-card h4 {
        font-size: 15px;
        margin-bottom: 9px;
    }

    .industry-chart {
        margin-bottom: 9px;
    }

    .industry-chart-ring {
        width: 118px;
        height: 118px;
    }

    .industry-chart-ring::after {
        inset: 21px;
    }

    .industry-chart-ring svg {
        width: 118px;
        height: 118px;
    }

    .industry-chart-center strong {
        font-size: 17px;
    }

    .industry-chart-center span {
        font-size: 9px;
    }

    .industry-legend li {
        font-size: 12px;
        gap: 8px;
        margin-bottom: 3px;
    }

    .dot {
        width: 8px;
        height: 8px;
    }

    /* ── AI COST ── */
    /*
        .ai-cost-dashboard {
            height: 462px;
        }
    */
    .ai-cost-dashboard {
        height: 523px;
    }

    .ai-cost-shell {
        border-radius: 36px;
        padding: 16px 8px 18px 72px;
        height: 88%;
    }

    .ai-cost-main {
        width: 436px;
        height: 420px;
        border-radius: 25px;
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);
    }

    .ai-cost-header {
        height: 58px;
        font-size: 19px;
    }

    .ai-cost-body {
        padding: 16px 30px 30px 30px;
    }

    .ai-cost-value {
        font-size: 32px;
    }

    .ai-cost-sub {
        font-size: 11px;
        margin-top: 7px;
        margin-bottom: 6px;
    }

    .ai-graph-card {
        height: 132px;
        padding: 19px;
        border-radius: 19px;
        margin-bottom: 9px;
    }

    .ai-graph-title {
        font-size: 11px;
    }

    .ai-cost-stats {
        gap: 17px;
        margin-bottom: 6px;
    }

    .ai-stat-card {
        padding: 11px;
        border-radius: 17px;
    }

    .ai-stat-card h4 {
        font-size: 16px;
    }

    .ai-stat-card span {
        font-size: 10px;
    }

    .ai-optimization-title {
        font-size: 11px;
        margin-top: 11px;
    }

    .ai-optimization-card {
        gap: 15px;
    }

    .opt-bar {
        width: 6px;
        height: 32px;
    }

    .ai-optimization-card h5 {
        font-size: 12px;
    }

    .ai-optimization-card p {
        font-size: 9px;
    }

    .utilization-card {
        left: 10px;
        top: 78px;
        width: 168px;
        padding: 11px 15px 5px 15px;
        border-radius: 25px;
    }

    .utilization-card h3 {
        font-size: 15px;
        margin-bottom: 16px;
    }

    .util-row span {
        font-size: 10px;
    }

    .util-row strong {
        font-size: 11px;
    }

    .util-progress {
        height: 10px;
    }

    .predictive-title {
        font-size: 12px;
    }

    .predictive-card {
        border-radius: 15px;
    }

    .predictive-card span {
        font-size: 10px;
    }

    .predictive-card h4 {
        font-size: 14px;
    }

    .saved-card {
        border-radius: 15px;
    }

    .saved-card span {
        font-size: 10px;
    }

    .saved-card h4 {
        font-size: 14px;
    }

    /* ── ENGAGEMENT MODELS ── */
    /*    .engagement-models-section {
            padding: 72px 20px 88px;
        }*/
    .engagement-models-section {
        padding: 10px 20px 88px;
    }

    .engagement-models-container {
        max-width: 1310px;
    }

    .engagement-models-header {
        margin-bottom: 28px;
    }

    .engagement-models-title {
        font-size: 41px;
        margin-bottom: 12px;
    }

    .engagement-models-subtitle {
        font-size: 18px;
        max-width: 780px;
    }

    .engagement-models-grid {
        grid-template-columns: 1.1fr 1fr 1fr;
    }

    .engagement-card,
    .engagement-card-image {
        height: 255px;
    }

    .engagement-card-large {
        min-height: 510px;
        padding: 38px 32px 22px 38px;
    }

    .engagement-card-large h3 {
        font-size: 30px;
    }

    .engagement-card-icon {
        width: 94px;
        margin-bottom: 12px;
    }

    .engagement-card-text {
        left: 32px;
        bottom: 26px;
    }

    .engagement-card-text h3 {
        font-size: 23px;
    }

    .engagement-large-hover {
        left: 32px;
        right: 32px;
        bottom: 32px;
    }

    .engagement-large-hover li {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .engagement-hover-panel {
        padding: 84px 26px 20px;
    }

    .engagement-hover-panel li {
        font-size: 12px;
    }

    /*    .engagement-card-large:hover .engagement-large-info {
            transform: translateY(-276px);
        }*/
    .engagement-card-large:hover .engagement-large-info {
        transform: translateY(-234px);
    }

    .engagement-card:hover .engagement-card-text {
        transform: translateY(-136px);
    }

    .solutions-services-page .engagement-large-btn .btn.primary {
        min-width: 240px;
        padding: 15px 30px;
        font-size: 1.02rem;
    }

    .solutions-services-page .engagement-small-btn .btn.primary {
        padding: 11px 22px;
        font-size: 0.96rem;
    }

    .solutions-services-page .hero-industries-buttons .btn-text {
        font-size: 14px;
    }

    /* ── ROW-2 SPECIFIC ── */
    .row-2 .solution-showcase-title {
        max-width: 420px;
    }

    .row-2 .solution-showcase-list {
        margin-bottom: 28px;
    }

    .row-2 .solution-showcase-image {
        margin-top: 4px;
    }

    /* ── ROW-5 SPECIFIC ── */
    .row-5 .solution-showcase-list {
        margin-bottom: 18px;
    }

    .row-5 .solution-showcase-title {
        margin-top: 0px;
    }

    .ai-cost-dashboard-wrap {
        min-height: 430px;
    }

    .row-4 .solution-showcase-title {
        margin-top: 22px;
    }

    .ai-cost-dashboard {
        height: 460px;
        max-width: 530px;
        margin-top: 0;
    }

    /*    .ai-cost-shell {
            border-radius: 36px;
            padding: 16px 8px 18px 72px;
            height: 88%;
        }*/
    .ai-cost-shell {
        border-radius: 36px;
        padding: 16px 8px 18px 118px;
        height: 84%;
    }

    .ai-cost-main {
        width: 388px;
        height: 372px;
        border-radius: 22px;
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);
    }

    .ai-cost-header {
        height: 54px;
        font-size: 17px;
    }

    .ai-cost-body {
        padding: 13px 26px 26px 26px;
    }

    .ai-cost-value {
        font-size: 28px;
    }

    .ai-cost-sub {
        font-size: 10px;
        margin-top: 6px;
        margin-bottom: 5px;
    }

    .ai-graph-card {
        height: 116px;
        padding: 17px;
        border-radius: 17px;
        margin-bottom: 8px;
    }

    .ai-graph-title {
        font-size: 10px;
    }

    .ai-cost-stats {
        gap: 15px;
        margin-bottom: 5px;
    }

    .ai-stat-card {
        padding: 9px;
        border-radius: 15px;
    }

    .ai-stat-card h4 {
        font-size: 14px;
    }

    .ai-stat-card span {
        font-size: 9px;
    }

    .ai-optimization-title {
        font-size: 10px;
        margin-top: 9px;
    }

    .ai-optimization-card {
        gap: 13px;
    }

    .opt-bar {
        width: 5px;
        height: 28px;
    }

    .ai-optimization-card h5 {
        font-size: 11px;
    }

    .ai-optimization-card p {
        font-size: 8px;
    }

    .utilization-card {
        left: 8px;
        top: 68px;
        width: 148px;
        padding: 10px 13px 4px 13px;
        border-radius: 22px;
    }

    .utilization-card h3 {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .util-row span {
        font-size: 9px;
    }

    .util-row strong {
        font-size: 10px;
    }

    .util-progress {
        height: 9px;
    }

    .predictive-title {
        font-size: 11px;
    }

    .predictive-card h4 {
        font-size: 13px;
    }

    .saved-card h4 {
        font-size: 13px;
    }

    /* ── INDUSTRY AI WRAP — real dimensions instead of scale ── */
    .industry-ai-wrap {
        min-height: 480px;
        max-width: 575px;
    }

    /*    .industry-ai-shell {
            border-radius: 36px;
            padding: 22px 36px 22px 36px;

        }*/
    .industry-ai-shell {
        border-radius: 36px;
        padding: 10px 36px 17px 36px;
    }

    .industry-ai-waves {
        height: 200px;
    }

    /*    .industry-ai-dashboard {
            width: 468px;
            height: 388px;
            border-radius: 24px;
            box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);
        }*/
    .industry-ai-dashboard {
        width: 468px;
        height: 378px;
        border-radius: 24px;
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5);
    }

    /*    .industry-ai-header {
            height: 58px;
            font-size: 20px;
        }*/
    .industry-ai-header {
        height: 48px;
        font-size: 20px;
    }

    /*    .industry-ai-list {
            gap: 5px;
            padding: 10px 10px 0px 24px;
        }*/
    .industry-ai-list {
        gap: 5px;
        padding: 6px 10px 0px 24px;
    }

    .industry-ai-content {
        gap: 14px;
        border-radius: 16px;
    }

    .industry-ai-icon {
        height: 56px;
    }

    .industry-ai-image {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        min-width: 28px !important;
        flex: 0 0 28px;
    }

    .industry-ai-text h5 {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .industry-ai-text p {
        font-size: 9px;
    }

    /*    .industry-score-card {
            right: 10px;
            top: 96px;
            width: 192px;
            height: 308px;
            padding: 14px;
            border-radius: 24px;
        }*/
    .industry-score-card {
        right: 10px;
        top: 58px;
        width: 192px;
        height: 308px;
        padding: 14px;
        border-radius: 24px;
    }

    .industry-score-card h4 {
        font-size: 15px;
        margin-bottom: 9px;
    }

    .industry-chart {
        margin-bottom: 9px;
    }

    .industry-chart-ring {
        width: 114px;
        height: 114px;
    }

    .industry-chart-ring::after {
        inset: 20px;
    }

    .industry-chart-ring svg {
        width: 114px;
        height: 114px;
    }

    .industry-chart-center strong {
        font-size: 16px;
    }

    .industry-chart-center span {
        font-size: 9px;
    }

    .industry-legend li {
        font-size: 12px;
        gap: 8px;
        margin-bottom: 3px;
    }

    .dot {
        width: 8px;
        height: 8px;
    }

    /* ── ROW 5 SPECIFIC ── */
    .row-5 .solution-showcase-title {
        margin-top: 0;
    }

    .row-5 .solution-showcase-list {
        margin-bottom: 18px;
    }

    /* ── ROW 4 SPECIFIC ── */
    .row-4 .solution-showcase-title {
        margin-top: 22px;
    }

}


@media (min-width: 1440px) {


    /*  .ai-cost-dashboard {
        height: 480px;
      }*/
    .ai-cost-dashboard {
        height: 480px;
    }

    /*  .ai-cost-shell {
        border-radius: 38px;
    *//*    padding: 18px 8px 20px 64px;*//*
            padding: 18px 8px 20px 100px;
        height: 87%;
      }*/
    .ai-cost-shell {
        border-radius: 38px;
        /* padding: 18px 8px 20px 64px; */
        padding: 18px 8px 20px 90px;
        height: 87%;
    }

    .ai-cost-main {
        width: 428px;
        height: 437px;
        border-radius: 26px;
        box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.5);
    }

    .ai-cost-header {
        /*    height: 64px;
            font-size: 22px;*/
        height: 60px; /* match base */
        font-size: 20px;
    }

    .row-5 .solution-showcase-list {
        margin-bottom: 22px;
    }

    .ai-cost-body {
        padding: 18px 32px 32px 32px;
    }

    .ai-cost-value {
        font-size: 31px;
    }

    .ai-cost-sub {
        font-size: 12px;
        margin-top: 8px;
        margin-bottom: 7px;
    }

    .ai-graph-card {
        height: 129px;
        padding: 20px;
        border-radius: 20px;
        margin-bottom: 10px;
    }

    .ai-graph-title {
        font-size: 12px;
    }

    .ai-cost-stats {
        gap: 18px;
        margin-bottom: 7px;
    }

    .ai-stat-card {
        padding: 12px;
        border-radius: 18px;
    }

    .ai-stat-card h4 {
        font-size: 17px;
    }

    .ai-stat-card span {
        font-size: 11px;
    }

    .ai-optimization-title {
        font-size: 12px;
        margin-top: 12px;
    }

    .ai-optimization-card {
        gap: 16px;
    }

    .opt-bar {
        width: 7px;
        height: 34px;
    }

    .ai-optimization-card h5 {
        font-size: 13px;
    }

    .ai-optimization-card p {
        font-size: 10px;
    }

    /*  .utilization-card {
        left: -2px;
        top: 80px;
        width: 208px;
        padding: 12px 16px 6px 16px;
        border-radius: 26px;
      }*/
    .utilization-card {
        left: 10px;
        top: 80px;
        width: 178px;
        padding: 12px 16px 6px 16px;
        border-radius: 26px;
    }

    .utilization-card h3 {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .util-row span {
        font-size: 11px;
    }

    .util-row strong {
        font-size: 12px;
    }

    .util-progress {
        height: 11px;
    }

    .predictive-title {
        font-size: 13px;
    }

    .predictive-card {
        border-radius: 16px;
    }

    .predictive-card span {
        font-size: 11px;
    }

    .predictive-card h4 {
        font-size: 15px;
    }

    .saved-card {
        border-radius: 16px;
    }

    .saved-card span {
        font-size: 11px;
    }

    .saved-card h4 {
        font-size: 15px;
    }

    .industry-ai-wrap {
        min-height: 500px;
    }

    .industry-ai-shell {
        border-radius: 38px;
        padding: 23px 40px 23px 40px;
    }

    .industry-ai-waves {
        height: 220px;
    }

    .industry-ai-dashboard {
        width: 500px;
        height: 420px;
        border-radius: 26px;
        box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.5);
    }

    .industry-ai-header {
        height: 64px;
        font-size: 22px;
    }

    .industry-ai-list {
        gap: 6px;
        padding: 12px 12px 0px 28px;
    }

    .industry-ai-content {
        gap: 16px;
        border-radius: 18px;
    }

    .industry-ai-icon {
        height: 60px;
    }

    .industry-ai-image {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        min-width: 32px !important;
        flex: 0 0 32px;
    }

    .industry-ai-text h5 {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .industry-ai-text p {
        font-size: 10px;
    }

    .industry-score-card {
        right: 12px;
        top: 102px;
        width: 210px;
        height: 326px;
        padding: 16px;
        border-radius: 26px;
    }

    .industry-score-card h4 {
        font-size: 16px;
    }

    .industry-chart-ring {
        width: 124px;
        height: 124px;
    }

    .industry-chart-ring::after {
        inset: 22px;
    }

    .industry-chart-center strong {
        font-size: 18px;
    }

    .industry-chart-center span {
        font-size: 10px;
    }

    .industry-legend li {
        font-size: 13px;
        gap: 9px;
    }

    .dot {
        width: 9px;
        height: 9px;
    }

    /* Donut chart SVG scales up */
    .industry-chart-ring svg {
        width: 124px;
        height: 124px;
    }

    .qe-dashboard-wrap {
        min-height: 500px;
    }

    .qe-dashboard-shell {
        border-radius: 38px;
        padding: 23px 46px 23px 46px;
    }

    .qe-bg-left-img {
        width: 360px;
        height: 346px;
        top: 84px;
    }

    .qe-bg-right-img {
        width: 188px;
        height: 240px;
        right: -36px;
        top: 128px;
    }

    .qe-dashboard-panel {
        height: 400px;
        width: 460px;
        padding: 34px 36px 18px 30px;
        border-radius: 26px;
    }

    .qe-dashboard-title {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .qe-stat-grid {
        gap: 32px;
        margin-bottom: 18px;
    }

    .qe-mini-stat {
        width: 96px;
        height: 72px;
        padding: 12px;
        border-radius: 18px;
    }

    .qe-stat-number {
        font-size: 17px;
    }

    .qe-stat-label {
        font-size: 11px;
    }

    .qe-graph-card {
        height: 128px;
        padding: 20px;
        border-radius: 20px;
        margin-bottom: 18px;
    }

    .qe-graph-title {
        font-size: 13px;
        margin-bottom: 30px;
    }

    .qe-graph-container {
        height: 100px;
    }

    .qe-test-title {
        font-size: 14px;
    }

    .qe-test-list li {
        font-size: 13px;
        padding-left: 20px;
    }

    .qe-test-list li::before {
        width: 9px;
        height: 9px;
    }

    /*  .qe-score-card {
        top: 90px;
        right: 12px;
        width: 210px;
        height: 326px;
        padding: 28px;
        border-radius: 26px;
      }*/
    .qe-score-card {
        top: 183px;
        right: 12px;
        width: 210px;
        height: 326px;
        padding: 28px;
        border-radius: 26px;
    }

    .qe-score-title {
        font-size: 19px;
    }

    .qe-grade {
        font-size: 52px;
    }

    .qe-grade-sub {
        font-size: 15px;
        max-width: 160px;
        margin-bottom: 18px;
    }

    .qe-span {
        font-size: 13px;
    }

    .qe-progress {
        width: 156px;
        height: 11px;
    }

    .qe-score-row {
        font-size: 15px;
        max-width: 152px;
    }

    .ide-mockup-container {
        min-height: 500px;
    }

    .ide-frame {
        border-radius: 38px;
        padding: 34px 46px 28px 34px;
    }

    .ide-window {
        height: 400px;
        width: 470px;
        border-radius: 22px;
    }

    .ide-header {
        padding: 16px 22px;
    }

    .ide-content {
        padding: 34px;
    }

    .typing-container .line {
        font-size: 14px;
    }

    .predict-highlight {
        width: 264px;
        font-size: 14px;
        padding: 7px 14px;
    }

    .metrics-card {
        right: 12px;
        top: 142px;
        width: 210px;
        height: 304px;
        padding: 26px;
        border-radius: 26px;
    }

    .metrics-card h4 {
        font-size: 18px;
    }

    .pct-val,
    .speed-val,
    .bug-val {
        font-size: 18px;
    }

    .code-quality-label,
    .ship-speed-label,
    .bug-rate-label {
        font-size: 12px;
    }

    .ai-suggestion {
        bottom: 60px;
        left: 54px;
        width: 430px;
        height: 116px;
        padding: 20px;
        border-radius: 22px;
    }

    .ai-tag {
        font-size: 17px;
    }

    .ai-para {
        font-size: 14px;
        max-width: 340px;
    }

    .bg-line:nth-child(1) {
        width: 320px;
    }

    .bg-line:nth-child(2) {
        width: 270px;
    }

    .bg-line:nth-child(3) {
        width: 220px;
    }

    .solution-showcase-row {
        grid-template-columns: 1fr 1fr;
        gap: 100px;
    }

    /*  .solution-showcase-image > img {
        max-width: 600px;
      }*/
    .solution-showcase-image > img {
        max-width: 523px;
    }

    .solution-showcase-content {
        max-width: 580px;
    }

    .solution-showcase-title {
        font-size: 38px;
        margin-bottom: 15px;
        margin-top: 2px;
    }

    .row-2 .solution-showcase-list {
        margin-bottom: 21px;
    }

    .row-2 .solution-showcase-image {
        margin-top: 6px;
    }

    /*  .solution-showcase-description {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 16px;
        max-width: 500px;
      }*/
    .solution-showcase-description {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 16px;
        max-width: 500px;
    }

    .solution-showcase-list-title {
        font-size: 26px;
        margin-bottom: 18px;
    }

    .solution-showcase-list {
        margin-bottom: 40px;
    }

    .solution-showcase-list li {
        font-size: 16px;
        padding: 6px 0 6px 10px;
        gap: 14px;
    }

    .solution-showcase-list li img {
        width: 22px;
        height: 22px;
    }

    /* Phone stack adjustments */
    /*  .phone-top {
        top: 40px;
      }*/
    .phone-top {
        top: 45px;
    }

    .phone-bottom {
        top: 150px;
    }

    .usecase-solutions-section {
        padding: 120px 20px 90px;
    }

    .usecase-solutions-container {
        max-width: 1350px;
        gap: 48px;
    }

    .usecase-solutions-header {
        margin-bottom: 24px;
    }

    .usecase-solutions-heading,
    .usecase-solutions-heading span {
        font-size: 48px;
        margin-bottom: 20px;
    }

    .usecase-solutions-subheading {
        max-width: 800px;
        font-size: 22px;
        line-height: 1.35;
    }

    .solution-phone-stack,
    .ide-mockup-container,
    .qe-dashboard-wrap,
    .industry-ai-wrap,
    .ai-cost-dashboard {
        max-width: 600px;
        min-height: 539px;
    }

    .ai-cost-dashboard {
        max-width: 544px;
        min-height: 539px;
    }

    /*  .usecase-solutions-section .hero-industries-buttons .btn {
        min-width: 240px;
        height: 54px;
        padding: 0 28px;
      }*/
    .usecase-solutions-section .hero-industries-buttons .btn {
        min-width: 240px;
        height: 48px;
        padding: 0 28px;
    }

    .solutions-services-section {
        height: 100vh; /* height: 520px;*/
        min-height: 520px;
    }

    .solutions-services-heading {
        font-size: 54px;
        font-family: Inter;
        line-height: 56px;
    }

    .solutions-services-heading span {
        font-size: 54px;
        font-family: Inter;
        line-height: 56px;
    }

    .solutions-services-content {
        width: 670;
        height: 228;
        top: 142px;
        left: 385px;
        gap: 24px;
    }

    .solutions-services-subheading {
        font-size: 22px;
    }

    .solutions-services-description {
        font-size: 18px;
        max-width: 738px;
        margin-bottom: 48px;
    }

    .solutions-services-section .hero-industries-buttons .btn {
        width: 250px;
        height: 55px;
        font-size: 15px;
    }

    .ai-services-section {
        padding: 90px 0px 0px;
    }

    /*  .ai-services-container {
        max-width: 1400px;
      }*/
    .ai-services-heading {
        font-size: 50px;
    }

    .ai-services-heading span {
        font-size: 50px;
    }

    .ai-services-subheading {
        font-size: 21px;
        max-width: 800px;
    }

    .ai-service-card,
    .ai-service-cta-card {
        padding: 45px;
    }

    .ai-service-title {
        font-size: 27px;
    }

    .ai-service-description {
        font-size: 16px;
    }

    .ai-service-tags span {
        font-size: 13px;
        padding: 9px 18px;
    }

    .ai-service-btn-primary,
    .ai-service-btn-secondary,
    .ai-services-main-btn {
        height: 48px;
        font-size: 15px;
        padding: 0 20px;
    }

    .engagement-models-section {
        padding: 80px 20px 100px;
    }

    .engagement-models-container {
        max-width: 1350px;
    }

    .engagement-models-header {
        margin-bottom: 35px;
    }

    .engagement-models-title {
        font-size: 44px;
        margin-bottom: 14px;
    }

    .engagement-models-subtitle {
        font-size: 20px;
        max-width: 820px;
    }

    .engagement-models-grid {
        grid-template-columns: 1.1fr 1fr 1fr;
    }

    .engagement-card,
    .engagement-card-image {
        height: 270px;
    }

    .engagement-card-large {
        min-height: 540px;
        padding: 40px 35px 25px 40px;
    }

    .engagement-card-large h3 {
        font-size: 32px;
    }

    .engagement-card-icon {
        width: 100px;
        margin-bottom: 14px;
    }

    .engagement-card-text {
        left: 35px;
        bottom: 28px;
    }

    .engagement-card-text h3 {
        font-size: 25px;
    }

    .engagement-large-hover {
        left: 35px;
        right: 35px;
        bottom: 35px;
    }

    .engagement-large-hover li {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .engagement-hover-panel {
        padding: 90px 28px 22px;
    }

    .engagement-hover-panel li {
        font-size: 13px;
    }

    .engagement-card-large:hover .engagement-large-info {
        transform: translateY(-290px);
    }

    .engagement-card:hover .engagement-card-text {
        transform: translateY(-140px);
    }

    .solutions-services-page .engagement-large-btn .btn.primary {
        min-width: 250px;
        padding: 17px 32px;
        font-size: 1.05rem;
    }

    .solutions-services-page .engagement-small-btn .btn.primary {
        padding: 12px 24px;
        font-size: 1rem;
    }

    .usecase-solutions-heading span {
        font-size: 44px;

    }

    .usecase-solutions-subheading {
        font-size: 18px;
    }

    .ai-services-subheading {
        font-size: 20px;
    }

    .ai-services-heading span {
        font-size: 44px;
    }

    .solutions-services-page .hero-industries-buttons .btn-text {
        font-size: 14px;
    }

    .solutions-services-section .hero-industries-buttons .secondary {
        font-size: 14px;
    }

    .solutions-services-subheading {
        font-size: 20px;
    }

    .solutions-services-heading {
        font-size: 48px;
    }

    .solutions-services-description {
        font-size: 16px;
    }

    .solutions-services-page .hero-industries-buttons .btn-text {
        font-size: 16px;
    }

    .ai-service-btn-primary, .ai-service-btn-secondary, .ai-services-main-btn {
        font-size: 14px;
    }

    .ai-service-title {
        font-size: 24px;
    }

    .ai-service-description {
        font-size: 15px;

    }

    .ai-service-tags {
        max-width: 523px;
    }


}

@media (min-width: 1500px) {
    .row-2 .solution-showcase-title {
        max-width: 434px;
    }

    /* CONTAINER */
    .trusted-container, .section-container {
        max-width: 1400px;
    }

    .banking-body-section .trusted-container, .section-container {
        max-width: 1270px;
    }

    /* ── HERO SECTION ── */
    .solutions-services-section {
        height: 100vh; /* height: 560px;*/
        min-height: 560px;
    }

    .solutions-services-heading {
        font-size: 56px;
        line-height: 60px;
    }

    .solutions-services-heading span {
        font-size: 56px;
        line-height: 60px;
    }

    .solutions-services-subheading {
        font-size: 22px;
        margin-bottom: 24px;
    }

    .solutions-services-description {
        font-size: 18px;
        max-width: 750px;
        margin-bottom: 50px;
        line-height: 1.6;
    }

    .solutions-services-section .hero-industries-buttons .btn {
        min-width: 260px;
        height: 56px;
        font-size: 15px;
    }

    /* ── STATS BAR ── */
    .stat-number {
        font-size: 52px;
        min-width: 180px;
    }

    .stat-text {
        font-size: 18px;
        max-width: 220px;
        line-height: 26px;
    }

    /* ── AI SERVICES ── */
    .ai-services-section {
        padding: 95px 0px 0px;
    }

    /*    .ai-services-container {
            max-width: 1400px;
        }*/
    .ai-services-heading {
        font-size: 52px;
    }

    .ai-services-heading span {
        font-size: 52px;
    }

    .ai-services-subheading {
        font-size: 21px;
        max-width: 820px;
    }

    .ai-service-card,
    .ai-service-cta-card {
        padding: 48px;
    }

    .ai-service-title {
        font-size: 28px;
    }

    .ai-service-description {
        font-size: 15px;
    }

    .ai-service-tags span {
        font-size: 13px;
        padding: 9px 18px;
    }

    .ai-service-btn-primary,
    .ai-service-btn-secondary,
    .ai-services-main-btn {
        height: 50px;
        width: 224px;
        font-size: 15px;
        padding: 0 0px;
    }


    /* ── USECASE SOLUTIONS ── */
    /*    .usecase-solutions-section {
            padding: 120px 20px 95px;
        }*/
    .usecase-solutions-section {
        padding: 120px 20px 0px 95px;
    }

    .usecase-solutions-container {
        max-width: 1400px;
        gap: 52px;
    }

    .usecase-solutions-heading,
    .usecase-solutions-heading span {
        font-size: 50px;
        margin-bottom: 22px;
    }

    .usecase-solutions-subheading {
        font-size: 22px;
        max-width: 840px;
        line-height: 1.4;
    }

    .solution-showcase-row {
        grid-template-columns: 1fr 1fr;
        gap: 110px;
    }

    /*    .solution-showcase-title {
            font-size: 40px;
            margin-bottom: 18px;
            margin-top: 24px;
        }*/
    .solution-showcase-title {
        font-size: 40px;
        margin-bottom: 18px;
        margin-top: 24px;
    }

    .row-5 .solution-showcase-title {
        margin-top: 5px;
        max-width: 343px;
    }

    .solution-showcase-description {
        font-size: 16px;
        max-width: 520px;
        margin-bottom: 16px;
    }

    .solution-showcase-list-title {
        font-size: 27px;
        margin-bottom: 18px;
    }

    .solution-showcase-list li {
        font-size: 16px;
        gap: 14px;
    }

    .solution-showcase-list li img {
        width: 22px;
        height: 22px;
    }

    /*    .solution-phone-stack,
        .ide-mockup-container,
        .qe-dashboard-wrap,
        .industry-ai-wrap,
        .ai-cost-dashboard {
            max-width: 620px;
            min-height: 510px;
        }*/
    .solution-phone-stack, .ide-mockup-container, .qe-dashboard-wrap, .industry-ai-wrap, .ai-cost-dashboard {
        max-width: 620px;
        min-height: 564px;
    }

    .usecase-solutions-section .hero-industries-buttons .btn {
        min-width: 248px;
        height: 56px;
        padding: 0 28px;
    }

    /* ── IDE MOCKUP ── */
    .ide-mockup-container {
        min-height: 510px;
    }

    .ide-frame {
        border-radius: 40px;
        padding: 36px 50px 30px 36px;
    }

    .ide-window {
        height: 420px;
        width: 480px;
        border-radius: 24px;
    }

    .ide-content {
        padding: 36px;
    }

    .typing-container .line {
        font-size: 14px;
    }

    .predict-highlight {
        width: 270px;
        font-size: 14px;
        padding: 7px 14px;
    }

    .metrics-card {
        right: 11px;
        top: 148px;
        width: 215px;
        height: 310px;
        padding: 26px;
        border-radius: 26px;
    }

    .metrics-card h4 {
        font-size: 18px;
    }

    .pct-val,
    .speed-val,
    .bug-val {
        font-size: 18px;
    }

    .ai-suggestion {
        bottom: 62px;
        left: 56px;
        width: 440px;
        height: 118px;
        padding: 20px;
        border-radius: 22px;
    }

    .ai-tag {
        font-size: 17px;
    }

    .ai-para {
        font-size: 14px;
        max-width: 346px;
    }

    /* ── QE DASHBOARD ── */
    .qe-dashboard-wrap {
        min-height: 510px;
    }

    .qe-dashboard-shell {
        border-radius: 40px;
        padding: 36px 48px 36px 48px;
    }

    .qe-dashboard-panel {
        height: 408px;
        width: 468px;
        padding: 36px 38px 20px 32px;
        border-radius: 28px;
    }

    .qe-dashboard-title {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .qe-stat-grid {
        gap: 32px;
        margin-bottom: 18px;
    }

    .qe-mini-stat {
        width: 98px;
        height: 74px;
        padding: 12px;
        border-radius: 18px;
    }

    .qe-stat-number {
        font-size: 18px;
    }

    .qe-graph-card {
        height: 130px;
        padding: 20px;
        border-radius: 20px;
        margin-bottom: 18px;
    }

    /*    .qe-score-card {
            top: 92px;
            right: 12px;
            width: 215px;
            height: 332px;
            padding: 28px;
            border-radius: 28px;
        }*/
    .qe-score-card {
        top: 190px;
        right: 12px;
        width: 215px;
        height: 332px;
        padding: 28px;
        border-radius: 28px;
    }

    .qe-score-title {
        font-size: 20px;
    }

    .qe-grade {
        font-size: 54px;
    }

    .qe-grade-sub {
        font-size: 15px;
        max-width: 164px;
        margin-bottom: 18px;
    }

    .qe-progress {
        width: 158px;
        height: 11px;
    }

    /* ── INDUSTRY AI ── */
    .industry-ai-wrap {
        min-height: 510px;
    }

    .industry-ai-shell {
        border-radius: 40px;
        padding: 30px 42px 30px 42px;
    }

    .industry-ai-dashboard {
        width: 510px;
        height: 428px;
        border-radius: 28px;
        box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.5);
    }

    .industry-ai-header {
        height: 68px;
        font-size: 22px;
    }

    .industry-ai-list {
        gap: 7px;
        padding: 12px 12px 0px 28px;
    }

    .industry-ai-text h5 {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .industry-ai-text p {
        font-size: 10px;
    }

    .industry-score-card {
        right: 12px;
        top: 105px;
        width: 215px;
        height: 332px;
        padding: 16px;
        border-radius: 28px;
    }

    .industry-score-card h4 {
        font-size: 17px;
    }

    .industry-chart-ring {
        width: 128px;
        height: 128px;
    }

    .industry-chart-ring svg {
        width: 128px;
        height: 128px;
    }

    .industry-chart-center strong {
        font-size: 19px;
    }

    .industry-legend li {
        font-size: 13px;
        gap: 9px;
        margin-bottom: 4px;
    }

    /* ── AI COST ── */
    /*    .ai-cost-dashboard {
            height: 490px;
            max-width: 620px;
        }*/
    .ai-cost-dashboard {
        height: 517px;
        max-width: 620px;
    }

    /*    .ai-cost-shell {
            border-radius: 40px;
            padding: 18px 8px 20px 68px;
        }*/
    .ai-cost-shell {
        border-radius: 40px;
        padding: 18px 8px 20px 117px;
    }

    .ai-cost-main {
        width: 472px;
        height: 448px;
        border-radius: 28px;
        box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.5);
    }

    .ai-cost-header {
        height: 66px;
        font-size: 22px;
    }

    .ai-cost-body {
        padding: 18px 34px 34px 34px;
    }

    .ai-cost-value {
        font-size: 34px;
    }

    .ai-cost-sub {
        font-size: 12px;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .ai-graph-card {
        height: 140px;
        padding: 20px;
        border-radius: 20px;
        margin-bottom: 10px;
    }

    .ai-cost-stats {
        gap: 18px;
        margin-bottom: 8px;
    }

    .ai-stat-card h4 {
        font-size: 17px;
    }

    .ai-stat-card span {
        font-size: 11px;
    }

    /*    .utilization-card {
            left: -2px;
            top: 82px;
            width: 212px;
            padding: 12px 16px 6px 16px;
            border-radius: 28px;
        }*/
    .utilization-card {
        left: 13px;
        top: 82px;
        width: 212px;
        padding: 12px 16px 6px 16px;
        border-radius: 28px;
    }

    .utilization-card h3 {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .util-row span {
        font-size: 11px;
    }

    .util-row strong {
        font-size: 12px;
    }

    .util-progress {
        height: 11px;
    }

    .predictive-card h4 {
        font-size: 15px;
    }

    .saved-card h4 {
        font-size: 16px;
    }

    /* ── ENGAGEMENT MODELS ── */
    /*    .engagement-models-section {
            padding: 84px 20px 105px;
        }*/
    .engagement-models-section {
        padding: 84px 20px 0px 105px;
    }

    .engagement-models-container {
        max-width: 1400px;
    }

    .engagement-models-title {
        font-size: 46px;
        margin-bottom: 14px;
    }

    .engagement-models-subtitle {
        font-size: 21px;
        max-width: 840px;
    }

    .engagement-card,
    .engagement-card-image {
        height: 278px;
    }

    .engagement-card-large {
        min-height: 556px;
        padding: 46px 42px 28px 46px;
    }

    .engagement-card-large h3 {
        font-size: 34px;
    }

    .engagement-card-icon {
        width: 104px;
        margin-bottom: 14px;
    }

    .engagement-card-text h3 {
        font-size: 26px;
    }

    .engagement-large-hover li {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .engagement-hover-panel {
        padding: 92px 28px 22px;
    }

    .engagement-hover-panel li {
        font-size: 13px;
    }

    /*    .engagement-card-large:hover .engagement-large-info {
            transform: translateY(-306px);
        }*/
    .engagement-card-large:hover .engagement-large-info {
        transform: translateY(-243px);
    }

    /*    .engagement-card:hover .engagement-card-text {
            transform: translateY(-144px);
        }*/
    .engagement-card:hover .engagement-card-text {
        transform: translateY(-162px);
    }

    .solutions-services-page .engagement-large-btn .btn.primary {
        min-width: 256px;
        padding: 17px 34px;
        font-size: 1.08rem;
    }

    .solutions-services-page .engagement-small-btn .btn.primary {
        padding: 12px 26px;
        font-size: 1rem;
    }
}

@media (min-width: 1530px) and (max-height: 760px) and (min-height: 720px) {
    .qe-svg-graph {
        width: 86%;
        height: 100%;
        display: block;
    }

    .solution-showcase-title {
        font-size: 40px;
        margin-bottom: 18px;
        margin-top: 0px;
    }

    /* Hero section — viewport height aware */
    .solutions-services-section {
        height: 100vh; /*  height: 500px;*/
        min-height: 500px;
    }

    .solutions-services-heading {
        font-size: 52px;
        line-height: 56px;
    }

=
.solutions-services-heading span {
    font-size: 52px;
    line-height: 56px;
}
    .solutions-services-description {
        font-size: 16px;
        margin-bottom: 42px;
    }

    /* Stats bar slightly more compact */
    .stats-bar {
        padding: 22px 0;
    }

    .stat-number {
        font-size: 48px;
    }

    .stat-text {
        font-size: 16px;
        max-width: 210px;
    }

    /* AI services tighter padding */
    .ai-services-section {
        padding: 80px 0px 0px;
    }

    /* Usecase section tighter padding */
    .usecase-solutions-section {
        padding: 90px 20px 75px;
    }

    .usecase-solutions-container {
        gap: 44px;
    }

    .usecase-solutions-heading,
    .usecase-solutions-heading span {
        font-size: 46px;
    }

    /* IDE mockup — fits 742px height viewport */
    .ide-mockup-container {
        min-height: 472px;
    }

    .ide-window {
        height: 390px;
        width: 460px;
    }

    .metrics-card {
        top: 138px;
        width: 205px;
        height: 296px;
    }

    .ai-suggestion {
        bottom: 56px;
        left: 50px;
        width: 420px;
        height: 112px;
    }

    /* QE Dashboard */
    .qe-dashboard-wrap {
        min-height: 472px;
    }

    .qe-dashboard-panel {
        /*        height: 390px;*/
        height: 430px;
        width: 450px;
    }

    .qe-score-card {
        top: 88px;
        width: 206px;
        height: 316px;
    }

    /* Industry AI */
    .industry-ai-wrap {
        min-height: 472px;
    }

    .industry-ai-dashboard {
        width: 492px;
        /*   height: 410px;*/
        height: 450px;
    }

    .industry-score-card {
        top: 98px;
        width: 206px;
        height: 316px;
    }

    /* AI Cost */
    .ai-cost-dashboard {
        height: 468px;
    }

    /*    .ai-cost-main {
            width: 454px;
            height: 430px;
        }*/
    .ai-cost-main {
        width: 454px;
        height: 448px;
    }

    .ai-cost-shell {
        border-radius: 40px;
        padding: 18px 8px 20px 135px;
    }

    .ai-cost-dashboard {
        height: 557px;
        margin-top: 23px;
    }

    .utilization-card {
        top: 78px;
        width: 198px;
        left: 12px;
    }

    /* Engagement models */
    /*    .engagement-card-large {
            min-height: 530px;
        }*/
    /*   .engagement-card-large {
           min-height: 641px;
       }*/
    /*    .engagement-card,
        .engagement-card-image {
            height: 265px;
        }*/
    .engagement-card-large {
        min-height: 641px;
        padding: 42px 36px 28px 42px;
    }

    .engagement-card, .engagement-card-image {
        height: 320px;
    }

    .engagement-card-large:hover .engagement-large-info {
        transform: translateY(-290px);
    }

    /*    .engagement-card:hover .engagement-card-text {
            transform: translateY(-137px);
        }*/
    .engagement-card:hover .engagement-card-text {
        transform: translateY(-200px);
    }

    .engagement-card-large:hover .engagement-large-hover {
        opacity: 1;
        transform: translateY(-82px);
    }

    /* Hero section — viewport height aware */
    .engagement-divider {
        width: 327px;
        height: 2px;
        border: 1px solid #989898;
        background-color: #FFFFFF;
        margin-bottom: 43px;
        display: block;
    }


    /* ── ENGAGEMENT MODELS ── */
    .engagement-models-section {
        padding: 80px 20px 100px;
    }

    .engagement-models-container {
        max-width: 1350px;
    }

    .engagement-models-header {
        margin-bottom: 30px;
    }

    .engagement-models-title {
        font-size: 44px;
        margin-bottom: 12px;
    }

    .engagement-models-subtitle {
        font-size: 19px;
        max-width: 800px;
    }

    .engagement-models-grid {
        grid-template-columns: 1.1fr 1fr 1fr;
    }

    /* Large card */
    .engagement-card-large h3 {
        font-size: 30px;
        line-height: 1.3;
    }

    .engagement-card-icon {
        width: 96px;
        margin-bottom: 14px;
    }

    /* Large card hover — translate must clear icon + title height */
    .engagement-card-large:hover .engagement-large-info {
        transform: translateY(-330px);
    }

    /* Hover panel content */
    .engagement-large-hover {
        left: 36px;
        right: 36px;
        bottom: 28px;
    }

    .engagement-large-hover li {
        font-size: 17px;
        margin-bottom: 6px;
    }

    .engagement-large-hover ul {
        margin-bottom: 22px;
    }

    /* Image cards */
    .engagement-card,
    .engagement-card-image {
        height: 320px;
    }

    /* Image card hover — translate must clear title height */
    .engagement-card-text {
        left: 32px;
        bottom: 26px;
    }

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

    /* Hover panel for image cards */
    .engagement-hover-panel {
        padding: 95px 28px 22px;
    }

    .engagement-hover-panel li {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .engagement-hover-panel ul {
        margin-top: 12px;
        margin-bottom: 20px;
    }

    /* Buttons */
    .solutions-services-page .engagement-large-btn .btn.primary {
        min-width: 250px;
        padding: 16px 30px;
        font-size: 1rem;
    }

    .solutions-services-page .engagement-small-btn .btn.primary {
        padding: 12px 22px;
        font-size: 0.95rem;
    }

    .solutions-services-page .hero-industries-buttons .btn-text {
        font-size: 16px;
    }

    .solution-showcase-description {
        font-size: 18px;
        max-width: 520px;
        margin-bottom: 16px;
    }

    .solution-showcase-list li img {
        width: 26px;
        height: 26px;
    }

    .solution-showcase-list {
        margin-bottom: 59px;
    }

    .solution-showcase-description {
        font-size: 20px;
        max-width: 520px;
        margin-bottom: 16px;
    }

    .usecase-solutions-container {
        gap: 80px;
    }

    .row-2 .solution-showcase-list {
        margin-bottom: 59px;
    }

    .solution-phone-stack,
    .ide-mockup-container,
    .qe-dashboard-wrap,
    .industry-ai-wrap,
    .ai-cost-dashboard {
        min-height: 540px;
    }

    .ide-window {
        height: 470px;
    }

    .solution-showcase-list li {
        font-size: 19px;
        gap: 14px;
        padding: 14px 0 6px 10px;
    }

    .industry-ai-shell {
        margin-top: 43px;
    }

    .qe-dashboard-shell {
        margin-top: 17px;
    }

    .ide-frame {
        margin-top: 17px;
    }
}


@media (min-width: 1530px) and (min-height: 800px) {

    .solutions-services-section {
        height: 100vh; /* height: 600px;*/
        min-height: 600px;
    }

    .solutions-services-heading {
        font-size: 58px;
        line-height: 62px;
    }

    .solutions-services-heading span {
        font-size: 58px;
        line-height: 62px;
    }

    .solutions-services-description {
        font-size: 19px;
        margin-bottom: 52px;
        max-width: 780px;
    }

    .stat-number {
        font-size: 56px;
    }

    .stat-text {
        font-size: 19px;
        max-width: 230px;
        line-height: 28px;
    }

    .usecase-solutions-section {
        padding: 130px 20px 100px;
    }

    .usecase-solutions-container {
        gap: 58px;
    }

    .usecase-solutions-heading,
    .usecase-solutions-heading span {
        font-size: 52px;
    }

    .usecase-solutions-subheading {
        font-size: 23px;
    }

    .solution-showcase-row {
        gap: 120px;
    }

    .solution-showcase-title {
        font-size: 42px;
    }

    .solution-phone-stack,
    .ide-mockup-container,
    .qe-dashboard-wrap,
    .industry-ai-wrap,
    .ai-cost-dashboard {
        max-width: 640px;
        min-height: 540px;
    }

    .ide-window {
        height: 440px;
        width: 500px;
    }

    .qe-dashboard-panel {
        height: 428px;
        width: 488px;
    }

    .industry-ai-dashboard {
        width: 530px;
        height: 448px;
    }

    .ai-cost-main {
        width: 492px;
        height: 468px;
    }

    .engagement-card-large {
        min-height: 580px;
    }

    .engagement-card,
    .engagement-card-image {
        height: 290px;
    }

    .engagement-card-large:hover .engagement-large-info {
        transform: translateY(-320px);
    }

    .engagement-card:hover .engagement-card-text {
        transform: translateY(-152px);
    }
}


@media (max-width: 1279px) and (min-width: 1200px) {

    /*   .ai-cost-dashboard {
            height: 420px;
            max-width: 500px;
        }*/
    .ai-cost-dashboard {
        height: 407px;
        max-width: 500px;
    }

    /*    .ai-cost-shell {
            border-radius: 30px;
            padding: 12px 6px 14px 52px;
        }*/
    .ai-cost-shell {
        border-radius: 30px;
        padding: 12px 6px 14px 70px;
    }

    .ai-cost-main {
        width: 396px;
        height: 376px;
        border-radius: 22px;
        box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.5);
    }

    .ai-cost-header {
        height: 54px;
        font-size: 18px;
    }

    .ai-cost-body {
        padding: 12px 24px 24px 24px;
    }

    .ai-cost-value {
        font-size: 28px;
    }

    .ai-cost-sub {
        font-size: 10px;
        margin-top: 5px;
        margin-bottom: 4px;
    }

    .ai-graph-card {
        height: 118px;
        padding: 16px;
        border-radius: 16px;
        margin-bottom: 7px;
    }

    .ai-graph-title {
        font-size: 10px;
    }

    .ai-cost-stats {
        gap: 12px;
        margin-bottom: 4px;
    }

    .ai-stat-card {
        padding: 8px;
        border-radius: 14px;
    }

    .ai-stat-card h4 {
        font-size: 14px;
    }

    .ai-stat-card span {
        font-size: 9px;
    }

    .ai-optimization-title {
        font-size: 10px;
        margin-top: 8px;
    }

    .ai-optimization-card {
        gap: 12px;
    }

    .opt-bar {
        width: 5px;
        height: 28px;
    }

    .ai-optimization-card h5 {
        font-size: 11px;
    }

    .ai-optimization-card p {
        font-size: 8px;
    }

    /*
        .utilization-card {
            left: -2px;
            top: 66px;
            width: 172px;
            padding: 9px 12px 4px 12px;
            border-radius: 22px;
        }*/
    .utilization-card {
        left: 12px;
        top: 66px;
        width: 172px;
        padding: 9px 12px 4px 12px;
        border-radius: 22px;
    }

    .utilization-card h3 {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .util-item {
        margin-bottom: 4px;
    }

    .util-row {
        margin-bottom: 3px;
    }

    .util-row span {
        font-size: 9px;
    }

    .util-row strong {
        font-size: 10px;
    }

    .util-progress {
        height: 8px;
    }

    .predictive-title {
        font-size: 11px;
    }

    .predictive-card {
        border-radius: 12px;
    }

    .predictive-card span {
        font-size: 9px;
    }

    .predictive-card h4 {
        font-size: 13px;
    }

    .saved-card {
        border-radius: 12px;
        margin-top: 3px;
    }

    .saved-card span {
        font-size: 9px;
    }

    .saved-card h4 {
        font-size: 13px;
    }

    .industry-ai-wrap {
        min-height: 440px;
        max-width: 500px;
    }

    .industry-ai-shell {
        border-radius: 30px;
        padding: 22px 30px 22px 30px;
    }

    .industry-ai-waves {
        height: 170px;
    }

    .industry-ai-dashboard {
        width: 422px;
        height: 350px;
        border-radius: 22px;
        box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.5);
    }

    .industry-ai-header {
        height: 54px;
        font-size: 18px;
    }

    .industry-ai-list {
        gap: 4px;
        padding: 8px 8px 0px 22px;
    }

    .industry-ai-content {
        gap: 12px;
        border-radius: 14px;
    }

    .industry-ai-icon {
        height: 50px;
    }

    .industry-ai-image {
        width: 26px !important;
        height: 26px !important;
        max-width: 26px !important;
        min-width: 26px !important;
        flex: 0 0 26px;
    }

    .industry-ai-text h5 {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .industry-ai-text p {
        font-size: 8px;
    }

    .industry-score-card {
        right: 8px;
        top: 84px;
        width: 172px;
        height: 270px;
        padding: 12px;
        border-radius: 22px;
    }

    .industry-score-card h4 {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .industry-score-card hr {
        margin-bottom: 8px;
    }

    .industry-chart {
        margin-bottom: 8px;
    }

    .industry-chart-ring {
        width: 100px;
        height: 100px;
    }

    .industry-chart-ring::after {
        inset: 18px;
    }

    .industry-chart-ring svg {
        width: 100px;
        height: 100px;
    }

    .industry-chart-center strong {
        font-size: 15px;
    }

    .industry-chart-center span {
        font-size: 8px;
    }

    .industry-legend li {
        font-size: 11px;
        gap: 7px;
        margin-bottom: 2px;
    }

    .dot {
        width: 7px;
        height: 7px;
    }

    .qe-dashboard-wrap {
        min-height: 440px;
        max-width: 500px;
    }

    .qe-dashboard-shell {
        border-radius: 30px;
        padding: 26px 36px 26px 36px;
    }

    .qe-bg-left-img {
        width: 300px;
        height: 290px;
        top: 70px;
    }

    .qe-bg-right-img {
        width: 155px;
        height: 195px;
        right: -28px;
        top: 105px;
    }

    .qe-dashboard-panel {
        height: 345px;
        width: 396px;
        padding: 26px 28px 14px 24px;
        border-radius: 22px;
    }

    .qe-dashboard-title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .qe-stat-grid {
        gap: 22px;
        margin-bottom: 14px;
    }

    .qe-mini-stat {
        width: 82px;
        height: 62px;
        padding: 8px;
        border-radius: 14px;
    }

    .qe-stat-number {
        font-size: 15px;
    }

    .qe-stat-label {
        font-size: 9px;
    }

    .qe-graph-card {
        height: 110px;
        padding: 16px;
        border-radius: 16px;
        margin-bottom: 14px;
    }

    .qe-graph-title {
        font-size: 11px;
        margin-bottom: 24px;
    }

    .qe-graph-container {
        height: 88px;
    }

    .qe-test-title {
        font-size: 12px;
    }

    .qe-test-list li {
        font-size: 11px;
        padding-left: 16px;
    }

    .qe-test-list li::before {
        width: 7px;
        height: 7px;
    }

    /*    .qe-score-card {
            top: 76px;
            right: 8px;
            width: 175px;
            height: 280px;
            padding: 22px;
            border-radius: 22px;
        }*/
    .qe-score-card {
        top: 147px;
        right: 26px;
        width: 175px;
        height: 280px;
        padding: 22px;
        border-radius: 22px;
    }

    .qe-score-title {
        font-size: 16px;
    }

    .qe-grade {
        font-size: 42px;
    }

    .qe-grade-sub {
        font-size: 13px;
        max-width: 138px;
        margin-bottom: 12px;
    }

    .qe-span {
        font-size: 11px;
    }

    .qe-progress {
        width: 128px;
        height: 9px;
    }

    .qe-score-row {
        font-size: 12px;
        max-width: 126px;
    }

    .qe-score-item {
        margin-bottom: 18px;
    }

    .ide-mockup-container {
        min-height: 440px;
        max-width: 500px;
    }

    .ide-frame {
        border-radius: 30px;
        padding: 26px 36px 22px 26px;
    }

    .ide-window {
        height: 340px;
        width: 400px;
        border-radius: 18px;
    }

    .ide-header {
        padding: 12px 18px;
    }

    .ide-content {
        padding: 26px;
    }

    .typing-container .line {
        font-size: 12px;
    }

    .predict-highlight {
        width: 220px;
        font-size: 12px;
        padding: 5px 10px;
    }

    .metrics-card {
        right: 8px;
        top: 120px;
        width: 175px;
        height: 260px;
        padding: 20px;
        border-radius: 22px;
    }

    .metrics-card h4 {
        font-size: 16px;
    }

    .pct-val,
    .speed-val,
    .bug-val {
        font-size: 16px;
    }

    .code-quality-label,
    .ship-speed-label,
    .bug-rate-label {
        font-size: 10px;
    }

    .ai-suggestion {
        bottom: 50px;
        left: 42px;
        width: 360px;
        height: 100px;
        padding: 16px;
        border-radius: 18px;
    }

    .ai-tag {
        font-size: 15px;
    }

    .ai-para {
        font-size: 12px;
        max-width: 280px;
    }

    .bg-line:nth-child(1) {
        width: 270px;
    }

    .bg-line:nth-child(2) {
        width: 220px;
    }

    .bg-line:nth-child(3) {
        width: 180px;
    }

    .bg-line {
        height: 10px;
        margin-bottom: 12px;
    }

    .wave-box {
        height: 60px;
    }

    .solution-showcase-row {
        grid-template-columns: 1fr 1fr;
        gap: 70px;
    }

    .solution-showcase-image > img {
        max-width: 500px;
    }

    .solution-showcase-content {
        max-width: 500px;
    }

    .solution-showcase-title {
        font-size: 30px;
        margin-bottom: 14px;
        margin-top: 16px;
        max-width: 276px;
    }

    .row-3 .solution-showcase-title {

        margin-top: 0px;

    }

    .solution-showcase-description {
        font-size: 14px;
        max-width: 440px;
        margin-bottom: 12px;
    }

    .solution-showcase-list-title {
        font-size: 21px;
        margin-bottom: 14px;
    }

    .solution-showcase-list {
        margin-bottom: 32px;
    }

    .solution-showcase-list li {
        font-size: 14px;
        gap: 10px;
    }

    .solution-showcase-list li img {
        width: 18px;
        height: 18px;
    }

    .phone-top {
        top: 32px;
    }

    .phone-bottom {
        top: 125px;
    }

    .usecase-solutions-section {
        padding: 100px 20px 75px;
    }

    .usecase-solutions-container {
        max-width: 1140px;
        gap: 36px;
    }

    .usecase-solutions-heading,
    .usecase-solutions-heading span {
        font-size: 40px;
        margin-bottom: 16px;
    }

    .usecase-solutions-subheading {
        max-width: 720px;
        font-size: 18px;
    }

    /*    .solution-phone-stack,
        .ide-mockup-container,
        .qe-dashboard-wrap,
        .industry-ai-wrap,
        .ai-cost-dashboard {
            max-width: 520px;
            min-height: 440px;
        }*/
    .solution-phone-stack, .ide-mockup-container, .qe-dashboard-wrap, .industry-ai-wrap, .ai-cost-dashboard {
        max-width: 520px;
        min-height: 407px;
    }

    .usecase-solutions-section .hero-industries-buttons .btn {
        min-width: 210px;
        height: 48px;
        padding: 0 22px;
    }

    .solutions-services-section {
        height: 100vh; /*        height: 400px;*/
        min-height: 400px;
    }

    .solutions-services-heading {
        font-size: 43px;
    }

    .solutions-services-heading span {
        font-size: 43px;
    }

    .solutions-services-subheading {
        font-size: 18px;
    }

    .solutions-services-description {
        font-size: 15px;
        margin-bottom: 38px;
    }

    .ai-services-heading {
        font-size: 39px;
    }

    .ai-services-heading span {
        font-size: 39px;
    }

    .ai-services-subheading {
        font-size: 17px;
    }

    .ai-service-card,
    .ai-service-cta-card {
        padding: 36px;
    }

    .ai-service-title {
        font-size: 22px;
    }

    .ai-service-description {
        font-size: 14px;
    }

    .ai-service-tags span {
        font-size: 11.5px;
        padding: 7px 14px;
    }

    .engagement-models-section {
        padding: 60px 20px 80px;
    }

    .engagement-models-container {
        max-width: 1140px;
    }

    .engagement-models-header {
        margin-bottom: 22px;
    }

    .engagement-models-title {
        font-size: 36px;
        margin-bottom: 10px;
    }

    .engagement-models-subtitle {
        font-size: 16.5px;
        line-height: 1.6;
    }

    .engagement-models-grid {
        grid-template-columns: 1.1fr 1fr 1fr;
    }

    .engagement-card,
    .engagement-card-image {
        height: 225px;
    }

    .engagement-card-large {
        min-height: 450px;
        padding: 32px 26px 20px 32px;
    }

    .engagement-card-large h3 {
        font-size: 25px;
    }

    .engagement-card-icon {
        width: 82px;
        margin-bottom: 10px;
    }

    .engagement-card-text {
        left: 26px;
        bottom: 22px;
    }

    .engagement-card-text h3 {
        font-size: 20px;
    }

    .engagement-large-hover {
        left: 26px;
        right: 26px;
        bottom: 26px;
    }

    .engagement-large-hover li {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .engagement-hover-panel {
        padding: 75px 22px 18px;
    }

    .engagement-hover-panel li {
        font-size: 11.5px;
    }

    /* Match hover translate to actual card height */
    .engagement-card-large:hover .engagement-large-info {
        transform: translateY(-240px);
    }

    .engagement-card:hover .engagement-card-text {
        transform: translateY(-115px);
    }

    .solutions-services-page .engagement-large-btn .btn.primary {
        min-width: 210px;
        padding: 13px 26px;
        font-size: 0.92rem;
    }

    .solutions-services-page .engagement-small-btn .btn.primary {
        padding: 10px 20px;
        font-size: 0.88rem;
    }
}

/*LARGE LAPTOP*/


@media (min-width: 1025px) and (max-width: 1199px) {


    .ai-cost-dashboard {
        height: 400px;
        max-width: 460px;
    }

    .ai-cost-shell {
        border-radius: 28px;
        padding: 10px 5px 12px 46px;
    }

    .ai-cost-main {
        width: 370px;
        height: 354px;
        border-radius: 20px;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);
    }

    .ai-cost-header {
        height: 50px;
        font-size: 16px;
    }

    .ai-cost-body {
        padding: 11px 20px 22px 20px;
    }

    .ai-cost-value {
        font-size: 26px;
    }

    .ai-cost-sub {
        font-size: 9px;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .ai-graph-card {
        height: 108px;
        padding: 14px;
        border-radius: 14px;
        margin-bottom: 6px;
    }

    .ai-graph-title {
        font-size: 10px;
    }

    .ai-cost-stats {
        gap: 10px;
        margin-bottom: 4px;
    }

    .ai-stat-card {
        padding: 7px;
        border-radius: 13px;
    }

    .ai-stat-card h4 {
        font-size: 13px;
    }

    .ai-stat-card span {
        font-size: 8px;
    }

    .ai-optimization-title {
        font-size: 10px;
        margin-top: 7px;
    }

    .ai-optimization-card {
        gap: 10px;
    }

    .opt-bar {
        width: 5px;
        height: 26px;
    }

    .ai-optimization-card h5 {
        font-size: 10px;
    }

    .ai-optimization-card p {
        font-size: 8px;
    }

    .utilization-card {
        left: -2px;
        top: 62px;
        width: 158px;
        padding: 8px 11px 4px 11px;
        border-radius: 20px;
    }

    .utilization-card h3 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .util-item {
        margin-bottom: 4px;
    }

    .util-row {
        margin-bottom: 3px;
    }

    .util-row span {
        font-size: 8px;
    }

    .util-row strong {
        font-size: 9px;
    }

    .util-progress {
        height: 7px;
    }

    .predictive-title {
        font-size: 10px;
    }

    .predictive-card {
        border-radius: 11px;
    }

    .predictive-card span {
        font-size: 8px;
    }

    .predictive-card h4 {
        font-size: 12px;
    }

    .saved-card {
        border-radius: 11px;
        margin-top: 3px;
    }

    .saved-card span {
        font-size: 8px;
    }

    .saved-card h4 {
        font-size: 12px;
    }

    .industry-ai-wrap {
        min-height: 420px;
        max-width: 460px;
    }

    .industry-ai-shell {
        border-radius: 28px;
        padding: 20px 26px 20px 26px;
    }

    .industry-ai-waves {
        height: 160px;
    }

    .industry-ai-dashboard {
        width: 390px;
        height: 326px;
        border-radius: 20px;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);
    }

    .industry-ai-header {
        height: 50px;
        font-size: 16px;
    }

    .industry-ai-list {
        gap: 4px;
        padding: 8px 8px 0px 20px;
    }

    .industry-ai-content {
        gap: 10px;
        border-radius: 13px;
    }

    .industry-ai-icon {
        height: 46px;
    }

    .industry-ai-image {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        min-width: 24px !important;
        flex: 0 0 24px;
    }

    .industry-ai-text h5 {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .industry-ai-text p {
        font-size: 8px;
    }

    .industry-score-card {
        right: 6px;
        top: 76px;
        width: 160px;
        height: 252px;
        padding: 11px;
        border-radius: 20px;
    }

    .industry-score-card h4 {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .industry-score-card hr {
        margin-bottom: 8px;
    }

    .industry-chart {
        margin-bottom: 8px;
    }

    .industry-chart-ring {
        width: 92px;
        height: 92px;
    }

    .industry-chart-ring::after {
        inset: 16px;
    }

    .industry-chart-ring svg {
        width: 92px;
        height: 92px;
    }

    .industry-chart-center strong {
        font-size: 14px;
    }

    .industry-chart-center span {
        font-size: 7px;
    }

    .industry-legend li {
        font-size: 10px;
        gap: 6px;
        margin-bottom: 2px;
    }

    .dot {
        width: 7px;
        height: 7px;
    }

    .qe-dashboard-wrap {
        min-height: 420px;
        max-width: 460px;
    }

    .qe-dashboard-shell {
        border-radius: 28px;
        padding: 22px 30px 22px 30px;
    }

    .qe-bg-left-img {
        width: 270px;
        height: 260px;
        top: 64px;
    }

    .qe-bg-right-img {
        width: 140px;
        height: 178px;
        right: -25px;
        top: 96px;
    }

    .qe-dashboard-panel {
        height: 322px;
        width: 370px;
        padding: 22px 24px 12px 22px;
        border-radius: 20px;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.43);
    }

    .qe-dashboard-title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .qe-stat-grid {
        gap: 18px;
        margin-bottom: 12px;
    }

    .qe-mini-stat {
        width: 76px;
        height: 58px;
        padding: 8px;
        border-radius: 13px;
    }

    .qe-stat-number {
        font-size: 14px;
    }

    .qe-stat-label {
        font-size: 9px;
    }

    .qe-graph-card {
        height: 104px;
        padding: 14px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .qe-graph-title {
        font-size: 11px;
        margin-bottom: 22px;
    }

    .qe-graph-container {
        height: 82px;
    }

    .qe-test-title {
        font-size: 11px;
    }

    .qe-test-list li {
        font-size: 10px;
        padding-left: 14px;
    }

    .qe-test-list li::before {
        width: 6px;
        height: 6px;
    }

    /*    .qe-score-card {
            top: 70px;
            right: 6px;
            width: 162px;
            height: 260px;
            padding: 18px;
            border-radius: 20px;
        }*/
    .qe-score-card {
        top: 133px;
        right: 6px;
        width: 162px;
        height: 241px;
        padding: 18px;
        border-radius: 20px;
    }

    .qe-score-title {
        font-size: 15px;
    }

    .qe-grade {
        font-size: 38px;
    }

    .qe-grade-sub {
        font-size: 12px;
        max-width: 128px;
        margin-bottom: 12px;
    }

    .qe-span {
        font-size: 10px;
    }

    .qe-progress {
        width: 118px;
        height: 8px;
    }

    .qe-score-row {
        font-size: 11px;
        max-width: 116px;
    }

    .qe-score-item {
        margin-bottom: 16px;
    }

    .ide-mockup-container {
        min-height: 420px;
        max-width: 460px;
    }

    .ide-frame {
        border-radius: 28px;
        padding: 22px 32px 20px 22px;
    }

    .ide-window {
        height: 320px;
        width: 370px;
        border-radius: 16px;
    }

    .ide-header {
        padding: 11px 16px;
    }

    .ide-header .dots span {
        height: 8px;
        width: 8px;
        margin-right: 6px;
    }

    .ide-content {
        padding: 22px;
    }

    .typing-container .line {
        font-size: 11px;
    }

    .predict-highlight {
        width: 200px;
        font-size: 11px;
        padding: 5px 9px;
    }

    .metrics-card {
        right: 6px;
        top: 110px;
        width: 160px;
        height: 240px;
        padding: 18px;
        border-radius: 20px;
    }

    .metrics-card h4 {
        font-size: 15px;
    }

    .metrics-card hr {
        margin: 10px 0;
    }

    .pct-val,
    .speed-val,
    .bug-val {
        font-size: 15px;
    }

    .code-quality-label,
    .ship-speed-label,
    .bug-rate-label {
        font-size: 10px;
    }

    .ai-suggestion {
        bottom: 44px;
        left: 36px;
        width: 320px;
        height: 92px;
        padding: 14px;
        border-radius: 16px;
    }

    .ai-tag {
        font-size: 14px;
    }

    .ai-para {
        font-size: 11px;
        max-width: 260px;
    }

    .bg-line:nth-child(1) {
        width: 240px;
    }

    .bg-line:nth-child(2) {
        width: 195px;
    }

    .bg-line:nth-child(3) {
        width: 160px;
    }

    .bg-line {
        height: 9px;
        margin-bottom: 11px;
    }

    .bg-lines {
        top: 50px;
        left: 22px;
    }

    .wave-box {
        height: 55px;
    }

    .solution-showcase-row {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .solution-showcase-image > img {
        max-width: 440px;
    }

    .solution-showcase-content {
        max-width: 460px;
    }

    .solution-showcase-title {
        font-size: 28px;
        margin-bottom: 12px;
        margin-top: 12px;
        line-height: 1.15;
    }

    .solution-showcase-description {
        font-size: 14px;
        line-height: 1.35;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .solution-showcase-list-title {
        font-size: 19px;
        margin-bottom: 12px;
    }

    .solution-showcase-list {
        margin-bottom: 28px;
    }

    .solution-showcase-list li {
        font-size: 13px;
        gap: 10px;
        padding: 4px 0 4px 8px;
    }

    .solution-showcase-list li img {
        width: 18px;
        height: 18px;
    }

    .phone-top {
        top: 28px;
    }

    .phone-bottom {
        top: 115px;
    }

    .usecase-solutions-section {
        padding: 90px 18px 70px;
    }

    .usecase-solutions-container {
        max-width: 980px;
        gap: 32px;
    }

    .usecase-solutions-header {
        margin-bottom: 16px;
    }

    .usecase-solutions-heading,
    .usecase-solutions-heading span {
        font-size: 36px;
        margin-bottom: 14px;
    }

    .usecase-solutions-subheading {
        max-width: 680px;
        font-size: 17px;
        line-height: 1.35;
    }

    .solution-phone-stack,
    .ide-mockup-container,
    .qe-dashboard-wrap,
    .industry-ai-wrap,
    .ai-cost-dashboard {
        max-width: 480px;
        min-height: 420px;
    }

    .usecase-solutions-section .hero-industries-buttons .btn {
        min-width: 200px;
        height: 46px;
        padding: 0 20px;
        gap: 10px;
    }

    .solutions-services-section {
        height: 100vh; /* height: 420px;*/
        min-height: 420px;
    }

    .solutions-services-heading {
        font-size: 38px;
    }

    .solutions-services-heading span {
        font-size: 38px;
    }

    .solutions-services-subheading {
        font-size: 17px;
        margin-bottom: 18px;
    }

    .solutions-services-description {
        font-size: 14.5px;
        margin-bottom: 34px;
    }

    .solutions-services-section .hero-industries-buttons .btn {
        width: 210px;
        height: 48px;
        font-size: 13px;
    }

    .ai-services-section {
        padding: 70px 20px 0px;
    }

    .ai-services-heading {
        font-size: 36px;
    }

    .ai-services-heading span {
        font-size: 36px;
    }

    .ai-services-subheading {
        font-size: 16px;
        max-width: 640px;
    }

    .ai-service-card,
    .ai-service-cta-card {
        padding: 32px;
    }

    .ai-service-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .ai-service-description {
        font-size: 13.5px;
        margin-bottom: 24px;
    }

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

    .ai-service-tags span {
        font-size: 11px;
        padding: 7px 12px;
    }

    .ai-service-btn-primary,
    .ai-service-btn-secondary,
    .ai-services-main-btn {
        height: 40px;
        font-size: 13px;
        padding: 0 14px;
    }

    .engagement-models-section {
        padding: 55px 18px 70px;
    }

    .engagement-models-container {
        max-width: 980px;
    }

    .engagement-models-header {
        margin-bottom: 20px;
    }

    .engagement-models-title {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .engagement-models-subtitle {
        font-size: 15.5px;
        line-height: 1.55;
        max-width: 680px;
    }

    .engagement-models-grid {
        grid-template-columns: 1.15fr 1fr 1fr;
    }

    .engagement-card,
    .engagement-card-image {
        height: 210px;
    }

    .engagement-card-large {
        min-height: 420px;
        padding: 28px 22px 18px 28px;
    }

    .engagement-card-large h3 {
        font-size: 22px;
    }

    .engagement-card-icon {
        width: 72px;
        margin-bottom: 8px;
    }

    .engagement-card-text {
        left: 22px;
        bottom: 18px;
    }

    .engagement-card-text h3 {
        font-size: 19px;
    }

    .engagement-large-hover {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .engagement-large-hover li {
        font-size: 12.5px;
        margin-bottom: 4px;
    }

    .engagement-hover-panel {
        padding: 68px 18px 16px;
    }

    .engagement-hover-panel li {
        font-size: 11px;
    }

    .engagement-card-large:hover .engagement-large-info {
        transform: translateY(-220px);
    }

    .engagement-card:hover .engagement-card-text {
        transform: translateY(-100px);
    }

    .solutions-services-page .engagement-large-btn .btn.primary {
        min-width: 190px;
        padding: 11px 20px;
        font-size: 0.85rem;
    }

    .solutions-services-page .engagement-small-btn .btn.primary {
        padding: 9px 16px;
        font-size: 0.82rem;
    }

    .solutions-services-page .hero-industries-buttons .btn-text {
        font-size: 12px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    .ai-cost-dashboard {
        max-width: 400px;
        height: 340px;
    }

    .ai-cost-shell {
        padding: 14px 10px 14px 42px;
        border-radius: 24px;
    }

    .ai-cost-main {
        width: 355px;
        height: 320px;
        border-radius: 18px;
        box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.5);
    }

    .ai-cost-header {
        height: 48px;
        font-size: 14px;
    }

    .ai-cost-body {
        padding: 10px 18px 18px;
    }

    .ai-cost-value {
        font-size: 22px;
    }

    .ai-cost-sub {
        font-size: 8px;
        margin-top: 4px;
        margin-bottom: 5px;
    }

    .ai-graph-card {
        height: 95px;
        padding: 12px;
        border-radius: 14px;
        margin-bottom: 7px;
    }

    .ai-graph-title {
        font-size: 9px;
    }

    .ai-cost-stats {
        gap: 10px;
        margin-bottom: 5px;
    }

    .ai-stat-card {
        padding: 8px;
        border-radius: 12px;
    }

    .ai-stat-card h4 {
        font-size: 12px;
    }

    .ai-stat-card span {
        font-size: 7px;
    }

    .ai-optimization-title {
        font-size: 9px;
        margin-top: 6px;
    }

    .ai-optimization-card {
        gap: 12px;
    }

    .opt-bar {
        width: 6px;
        height: 28px;
    }

    .opt-bar {
        width: 5px;
        height: 24px;
    }

    .ai-optimization-card h5 {
        font-size: 9px;
    }

    .ai-optimization-card p {
        font-size: 7px;
    }

    .utilization-card {
        width: 145px;
        left: -10px;
        top: 70px;
        padding: 10px;
        border-radius: 18px;
    }

    .utilization-card h3 {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .util-item {
        margin-bottom: 4px;
    }

    .util-row {
        margin-bottom: 4px;
    }

    .util-row span,
    .util-row strong {
        font-size: 8px;
    }

    .util-progress {
        height: 7px;
    }

    .predictive-title {
        font-size: 11px;
    }

    .predictive-card {
        border-radius: 10px;
        padding: 4px;
    }

    .predictive-card span {
        font-size: 7px;
    }

    .predictive-card h4 {
        font-size: 10px;
    }

    .saved-card {
        border-radius: 10px;
        padding: 4px;
    }

    .saved-card span {
        font-size: 7px;
    }

    .saved-card h4 {
        font-size: 11px;
    }

    .industry-ai-wrap {
        max-width: 400px;
        min-height: 340px;
    }

    .industry-ai-shell {
        padding: 18px 20px;
        border-radius: 24px;
    }

    .industry-ai-waves {
        height: 120px;
    }

    /*    .industry-ai-dashboard {
            width: 355px;
            height: 315px;
            border-radius: 18px;
            box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.5);
        }*/
    .industry-ai-dashboard {
        width: 355px;
        height: 343px;
        border-radius: 18px;
        box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.5);
    }

    .industry-ai-header {
        height: 48px;
        font-size: 14px;
    }

    .row-4 .solution-showcase-title {
        margin-top: -1px;
    }

    /*    .industry-ai-list {
            padding: 8px 8px 0 14px;
            gap: 4px;
        }*/
    .industry-ai-list {
        padding: 8px 8px 0 14px;
        gap: 8px;
    }

    .industry-ai-content {
        border-radius: 12px;
        gap: 10px;
    }

    .industry-ai-icon {
        width: 8px;
        min-width: 8px;
        height: 44px;
    }

    .industry-ai-image {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        min-width: 20px !important;
        flex: 0 0 20px;
    }

    .industry-ai-text h5 {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .industry-ai-text p {
        font-size: 7px;
    }

    /*    .industry-score-card {
            width: 150px;
            height: 235px;
            right: -4px;
            top: 80px;
            padding: 10px;
            border-radius: 18px;
        }*/
    .industry-score-card {
        width: 150px;
        height: 242px;
        right: -4px;
        top: 80px;
        padding: 10px;
        border-radius: 18px;
    }

    .industry-score-card h4 {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .industry-score-card hr {
        margin-bottom: 9px;
    }

    .industry-chart {
        margin-bottom: 9px;
    }

    /*    .industry-chart-ring {
            width: 82px;
            height: 82px;
        }*/
    .industry-chart-ring {
        width: 90px;
        height: 90px;
    }

    .industry-chart-ring::after {
        inset: 15px;
    }

    /*    .industry-chart-ring svg {
            width: 104px;
            height: 104px;
        }*/
    .industry-chart-ring svg {
        width: 90px;
        height: 90px;
    }

    .industry-chart-center strong {
        font-size: 12px;
    }

    .industry-chart-center span {
        font-size: 6px;
    }

    .industry-legend li {
        font-size: 9px;
        gap: 6px;
        margin-bottom: 2px;
    }

    .dot {
        width: 6px;
        height: 6px;
    }

    .industry-ai-item {
        gap: 8px;
    }

    .qe-dashboard-wrap {
        min-height: 460px;
        max-width: 560px;
    }

    .qe-dashboard-shell {
        padding: 22px;
        border-radius: 24px;
    }

    .qe-bg-left-img {
        width: 320px;
        height: 308px;
        top: 76px;
    }

    .qe-bg-right-img {
        width: 168px;
        height: 212px;
        right: -30px;
        top: 114px;
    }

    .qe-dashboard-panel {
        width: 100%;
        height: 335px;
        padding: 24px 22px;
        border-radius: 22px;
    }

    .qe-dashboard-title {
        font-size: 19px;
        margin-bottom: 14px;
    }

    .qe-stat-grid {
        gap: 24px;
        margin-bottom: 14px;
    }

    .qe-mini-stat {
        width: 86px;
        height: 64px;
        padding: 10px;
        border-radius: 14px;
    }

    .qe-stat-number {
        font-size: 15px;
    }

    .qe-stat-label {
        font-size: 10px;
    }

    .qe-graph-card {
        height: 116px;
        padding: 16px;
        border-radius: 16px;
        margin-bottom: 14px;
    }

    .qe-graph-title {
        font-size: 12px;
        margin-bottom: 26px;
    }

    .qe-graph-container {
        height: 92px;
    }

    .qe-test-title {
        font-size: 12px;
    }

    .qe-test-list li {
        font-size: 11px;
        padding-left: 16px;
    }

    .qe-test-list li::before {
        width: 7px;
        height: 7px;
    }

    /*    .qe-score-card {
            width: 165px;
            height: 260px;
            right: 0;
            top: 70px;
            padding: 18px;
            border-radius: 22px;
        }*/
    .qe-score-card {
        width: 165px;
        height: 252px;
        right: -13px;
        top: 155px;
        padding: 18px;
        border-radius: 22px;
    }

    .qe-score-title {
        font-size: 17px;
    }

    .qe-grade {
        font-size: 36px;
    }

    .qe-grade-sub {
        font-size: 13px;
        max-width: 144px;
        margin-bottom: 14px;
    }

    .qe-span {
        font-size: 11px;
    }

    .qe-progress {
        width: 134px;
        height: 9px;
    }

    .qe-score-row {
        font-size: 13px;
        max-width: 130px;
    }

    .qe-score-item {
        margin-bottom: 20px;
    }

    .ide-mockup-container {
        min-height: 460px;
        max-width: 560px;
    }

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

    /*   .ide-window {
           width: 100%;
           height: 320px;
           border-radius: 20px;
       }*/
    .ide-window {
        width: 100%;
        height: 347px;
        border-radius: 20px;
    }

    .ide-header {
        padding: 13px 18px;
    }

    .ide-content {
        padding: 28px;
    }

    .typing-container .line {
        font-size: 13px;
    }

    .predict-highlight {
        width: 240px;
        font-size: 12px;
        padding: 5px 10px;
    }

    .metrics-card {
        width: 170px;
        height: 245px;
        right: -5px;
        top: 110px;
        padding: 18px;
        border-radius: 22px;
        z-index: 10;
    }

    .metrics-card h4 {
        font-size: 15px;
    }

    .pct-val,
    .speed-val,
    .bug-val {
        font-size: 16px;
    }

    .code-quality-label,
    .ship-speed-label,
    .bug-rate-label {
        font-size: 10px;
    }

    .ai-suggestion {
        width: 320px;
        height: 90px;
        left: 28px;
        bottom: 38px;
        padding: 14px;
        border-radius: 18px;
    }

    .ai-tag {
        font-size: 14px;
    }

    .ai-para {
        font-size: 11px;
        max-width: 250px;
    }

    .bg-line:nth-child(1) {
        width: 290px;
    }

    .bg-line:nth-child(2) {
        width: 240px;
    }

    .bg-line:nth-child(3) {
        width: 195px;
    }

    .wave-box {
        height: 60px;
    }

    .solution-showcase-row {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
        align-items: center;
    }

    /* Reverse row reset on tablet/mobile - image always on top */
    .solution-row-reverse {
        flex-direction: column;
    }

    .solution-showcase-image {
        order: 1;
        justify-content: center;
    }

    .solution-showcase-content {
        order: 2;
        max-width: 470px;
        margin: 0 auto;
        text-align: left;
    }

    .solution-showcase-image > img {
        max-width: 460px;
    }

    .solution-phone-stack {
        min-height: 440px;
    }

    .solution-showcase-title {
        font-size: 25px;
        line-height: 1.15;
        margin-bottom: 12px;
        margin-top: 0;

        /*        font-size: 30px;
                margin-bottom: 14px;
                margin-top: 0;
                line-height: 1.15;*/
    }

    .solution-showcase-description {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 12px;
        max-width: 420px;
    }

    .solution-showcase-list-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .solution-showcase-list {
        margin-bottom: 24px;
    }

    .solution-showcase-list li {
        font-size: 13px;
        gap: 10px;
        padding: 3px 0;
    }

    .solution-showcase-list li img {
        width: 16px;
        height: 16px;
    }

    .phone-top {
        top: 30px;
    }

    .phone-bottom {
        top: 120px;
    }

    .usecase-solutions-section {
        /*        padding: 80px 16px 60px;*/
        padding: 60px 20px;
    }

    .usecase-solutions-container {
        /*        max-width: 720px;
                gap: 28px;*/
        max-width: 876px;
        gap: 50px;
    }

    .usecase-solutions-header {
        margin-bottom: 12px;
    }

    .solutions-services-page .stat-text {
        max-width: 181px;
    }

    .usecase-solutions-heading,
    .usecase-solutions-heading span {
        font-size: 35px;
        margin-bottom: 12px;
    }

    .usecase-solutions-subheading {
        max-width: 600px;
        font-size: 16px;
        line-height: 1.4;
    }

    .industry-ai-wrap,
    .ai-cost-dashboard {
        max-width: 440px;
        min-height: 362px;
    }

    .solution-phone-stack,
    .ide-mockup-container,
    .qe-dashboard-wrap {
        max-width: 460px;
        min-height: 390px;
    }

    .usecase-solutions-section .hero-industries-buttons .btn {
        min-width: 185px;
        height: 44px;
        font-size: 13px;
        padding: 0 18px;
    }

    .usecase-solutions-section .hero-industries-buttons {
        gap: 14px;
    }

    .solutions-services-section {
        height: 100vh; /*        height: 400px;*/
        min-height: 400px;
        padding: 0px 0;
    }

    .solutions-services-content {
        max-width: 680px;
    }

    .solutions-services-heading {
        font-size: 34px;
        margin-bottom: 16px;
    }

    .solutions-services-heading span {
        font-size: 34px;
    }

    .solutions-services-subheading {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .solutions-services-description {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 30px;
    }

    .solutions-services-section .hero-industries-buttons .btn {
        width: 200px;
        height: 46px;
        font-size: 13px;
    }

    .ai-services-section {
        padding: 60px 20px 0px;
    }

    .ai-services-header {
        margin-bottom: 24px;
    }

    .ai-services-heading {
        font-size: 32px;
    }

    .ai-services-heading span {
        font-size: 32px;
    }

    .ai-services-subheading {
        font-size: 15px;
        max-width: 580px;
    }

    /* Stay 2 columns but tighter */
    .ai-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-service-card,
    .ai-service-cta-card {
        padding: 28px;
    }

    .ai-service-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .ai-service-description {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .ai-service-tags {
        gap: 8px;
        margin-bottom: 24px;
    }

    .ai-service-tags span {
        font-size: 11px;
        padding: 6px 11px;
    }

    .ai-service-btn-primary,
    .ai-service-btn-secondary,
    .ai-services-main-btn {
        height: 38px;
        font-size: 12.5px;
        padding: 0 12px;
        gap: 8px;
    }

    .engagement-models-section {
        padding: 60px 20px 20px;
    }

    .engagement-models-container {
        max-width: 720px;
    }

    .engagement-models-header {
        margin-bottom: 24px;
    }

    .engagement-models-title {
        font-size: 35px;
        margin-bottom: 10px;
    }

    .engagement-models-subtitle {
        font-size: 15px;
        line-height: 1.6;
        max-width: 662px;
    }

    /* Switch to 2-column grid at tablet */
    .engagement-models-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .engagement-column {
        gap: 18px;
    }

    /* Large card spans full width, becomes ROW layout */
    .engagement-card-large {
        grid-column: 1 / -1;
        min-height: auto;
        height: 320px;
        padding: 36px 32px;
        flex-direction: row;
        align-items: stretch;
        gap: 36px;
        justify-content: space-between;
    }

    /* Show content side-by-side, no hover dependency */
    .engagement-large-info {
        flex: 0 0 45%;
        align-self: flex-end;
        transform: none !important;
    }

    .engagement-large-hover {
        flex: 1;
        position: static;
        opacity: 1;
        transform: none;
        transition: none;
        align-self: center;
    }

    /* Cancel large card hover animations on tablet (always visible) */
    .engagement-card-large:hover .engagement-large-info {
        transform: none;
    }

    .engagement-card-large:hover .engagement-large-default {
        opacity: 1;
        transform: none;
    }

    .engagement-card-large h3 {
        font-size: 22px;
    }

    .engagement-card-icon {
        width: 70px;
        margin-bottom: 12px;
    }

    .engagement-large-hover li {
        font-size: 13px;
        margin-bottom: 5px;
    }

    .engagement-large-hover ul {
        margin-bottom: 16px;
    }

    /* Image cards stay with hover effect */
    .engagement-card,
    .engagement-card-image {
        height: 280px;
    }

    .engagement-card-text {
        left: 22px;
        bottom: 20px;
    }

    .engagement-card-text h3 {
        font-size: 20px;
    }

    .engagement-hover-panel {
        padding: 70px 22px 18px;
    }

    .engagement-hover-panel li {
        font-size: 12px;
    }

    .engagement-card:hover .engagement-card-text {
        transform: translateY(-177px);
        /* transform: translateY(-130px);*/
    }

    .engagement-hover-panel ul {
        padding-left: 20px;
        margin-bottom: 25px;
        margin-top: 25px;
    }


    .solutions-services-page .engagement-large-btn .btn.primary {
        min-width: 190px;
        padding: 12px 22px;
        font-size: 0.9rem;
    }

    .solutions-services-page .engagement-small-btn .btn.primary {
        padding: 10px 18px;
        font-size: 0.85rem;
    }

}

@media (min-width: 577px) and (max-width: 768px) {


    .ai-cost-dashboard {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .ai-cost-shell {
        /* padding: 12px 0px 12px 74px; */
        padding: 20px 0px 20px 22px;
        overflow: hidden;
        border-radius: 24px;
    }

    .ai-cost-main {
        width: 100%;
        max-width: 396px;
        height: auto;
        margin: 0 auto;
        margin-right: 20px;
    }

    .ai-cost-header {
        height: 48px;
        font-size: 16px;
    }

    .ai-cost-body {
        padding: 14px 18px 18px;
    }

    .ai-cost-value {
        font-size: 30px;
        line-height: 1;
    }

    .ai-cost-sub {
        font-size: 9px;
        margin-top: 4px;
        margin-bottom: 8px;
    }

    .ai-graph-card {
        height: 88px;
        padding: 10px 12px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .ai-graph-wrap {
        overflow: visible;
    }

    .ai-graph-title {
        font-size: 9px;
        margin-bottom: 6px;
    }

    .ai-cost-graph {
        height: 68px;
        width: 88%;
        transform: translateY(-7px);
    }

    .ai-cost-stats {
        gap: 10px;
        margin-bottom: 4px;
    }

    .ai-stat-card {
        padding: 8px;
        border-radius: 12px;
    }

    .ai-cost-graph svg {
        width: 100%;
    }

    .ai-stat-card h4 {
        font-size: 13px;
    }

    .ai-stat-card span {
        font-size: 8px;
    }

    .ai-optimization-title {
        font-size: 10px;
        margin-top: 8px;
    }

    .ai-optimization-card {
        gap: 11px;
    }

    .opt-bar {
        width: 5px;
        height: 27px;
    }

    .ai-optimization-card h5 {
        font-size: 11px;
    }

    .ai-optimization-card p {
        font-size: 8px;
    }

    .utilization-card {
        width: 145px;
        top: 55px;
        left: 29px;
        padding: 10px;
        border-radius: 18px;
    }

    .utilization-card h3 {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .util-item {
        margin-bottom: 4px;
    }

    .util-row {
        margin-bottom: 3px;
    }

    .util-row span,
    .util-row strong {
        font-size: 8px;
    }

    .util-progress {
        height: 7px;
    }

    .predictive-title {
        font-size: 9px;
    }

    .predictive-card {
        border-radius: 12px;
    }

    .predictive-card span {
        font-size: 9px;
    }

    .predictive-card h4 {
        font-size: 10px;
    }

    .saved-card {
        border-radius: 12px;
        margin-top: 3px;
    }

    .saved-card span {
        font-size: 9px;
    }

    .saved-card h4 {
        font-size: 10px;
    }

    .industry-ai-wrap {
        min-height: 420px;
        max-width: 520px;
    }

    .industry-ai-shell {
        border-radius: 28px;
        padding: 22px 26px 22px 26px;
    }

    .industry-ai-waves {
        height: 170px;
    }

    .industry-ai-dashboard {
        width: 410px;
        height: 342px;
        border-radius: 20px;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);
    }

    .industry-ai-header {
        height: 52px;
        font-size: 17px;
    }

    .industry-ai-list {
        gap: 4px;
        padding: 8px 8px 0px 22px;
    }

    .industry-ai-content {
        gap: 11px;
        border-radius: 14px;
    }

    .industry-ai-icon {
        height: 48px;
    }

    .industry-ai-image {
        width: 25px !important;
        height: 25px !important;
        max-width: 25px !important;
        min-width: 25px !important;
        flex: 0 0 25px;
    }

    .industry-ai-text h5 {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .industry-ai-text p {
        font-size: 8px;
    }

    .industry-score-card {
        right: 6px;
        top: 82px;
        width: 168px;
        height: 264px;
        padding: 12px;
        border-radius: 20px;
    }

    .industry-score-card h4 {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .industry-score-card hr {
        margin-bottom: 8px;
    }

    .industry-chart {
        margin-bottom: 8px;
    }

    .industry-chart-ring {
        width: 96px;
        height: 96px;
    }

    .industry-chart-ring::after {
        inset: 17px;
    }

    .industry-chart-ring svg {
        width: 96px;
        height: 96px;
    }

    .industry-chart-center strong {
        font-size: 14px;
    }

    .industry-chart-center span {
        font-size: 8px;
    }

    .industry-legend li {
        font-size: 10px;
        gap: 6px;
        margin-bottom: 2px;
    }

    .dot {
        width: 7px;
        height: 7px;
    }

    .qe-dashboard-wrap {
        min-height: 420px;
        max-width: 520px;
    }

    .qe-dashboard-shell {
        padding: 24px 18px;
        border-radius: 28px;
    }

    .qe-bg-left-img {
        width: 280px;
        height: 270px;
        top: 70px;
    }

    .qe-bg-right-img {
        width: 145px;
        height: 184px;
        right: -26px;
        top: 100px;
    }

    .qe-dashboard-panel {
        width: 100%;
        height: 340px;

        padding: 24px 20px 18px;

        border-radius: 20px;
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.43);
    }

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

    .qe-stat-grid {
        gap: 18px;
        margin-bottom: 12px;
    }

    .qe-mini-stat {
        width: 78px;
        height: 60px;
        padding: 8px;
        border-radius: 13px;
    }

    .qe-stat-number {
        font-size: 14px;
    }

    .qe-stat-label {
        font-size: 9px;
    }

    .qe-graph-card {
        height: 110px;
        padding: 14px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .qe-graph-title {
        font-size: 11px;
        margin-bottom: 22px;
    }

    .qe-graph-container {
        height: 86px;
    }

    .qe-test-title {
        font-size: 11px;
    }

    .qe-test-list li {
        font-size: 10px;
        padding-left: 14px;
    }

    .qe-test-list li::before {
        width: 6px;
        height: 6px;
    }

    /*    .qe-score-card {
            width: 170px;
            height: 270px;

            right: -2px;
            top: 78px;

            padding: 18px;

            border-radius: 18px;

        }*/
    .qe-score-card {
        width: 170px;
        height: 270px;
        right: -8px;
        top: 78px;
        padding: 18px;
        border-radius: 18px;
    }

    .qe-score-title {
        font-size: 16px;
    }

    .qe-grade {
        font-size: 38px;
    }

    .qe-grade-sub {
        font-size: 12px;
        max-width: 132px;
        margin-bottom: 12px;
    }

    .qe-span {
        font-size: 11px;
    }

    .qe-progress {
        width: 120px;
        height: 8px;
    }

    .qe-score-row {
        font-size: 12px;
        max-width: 120px;
    }

    .qe-svg-graph {
        width: 73%;

    }

    .qe-score-item {
        margin-bottom: 18px;
    }

    .ide-mockup-container {
        min-height: 420px;
        max-width: 520px;
    }

    .ide-frame {
        padding: 24px 18px 24px 18px;
        border-radius: 28px;
    }

    .ide-window {
        width: 100%;
        height: 330px;
        border-radius: 18px;
    }

    .ide-header {
        padding: 12px 16px;
    }

    .ide-header .dots span {
        height: 9px;
        width: 9px;
        margin-right: 7px;
    }

    .ide-content {
        padding: 24px;
    }

    .typing-container .line {
        font-size: 12px;
    }

    .predict-highlight {
        width: 220px;
        font-size: 11px;
        padding: 5px 9px;
    }

    .metrics-card {
        right: -5px;
        top: 115px;
        width: 160px;
        height: 235px;
        padding: 16px;
        border-radius: 18px;
    }

    .metrics-card h4 {
        font-size: 15px;
    }

    .metrics-card hr {
        margin: 10px 0;
    }

    .pct-val,
    .speed-val,
    .bug-val {
        font-size: 15px;
    }

    .code-quality-label,
    .ship-speed-label,
    .bug-rate-label {
        font-size: 10px;
    }

    .ai-suggestion {
        width: 300px;
        height: 90px;

        left: 20px;
        bottom: 30px;

        padding: 14px;

        border-radius: 16px;
    }

    .ai-tag {
        font-size: 14px;
    }

    .ai-para {
        font-size: 11px;
        max-width: 230px;
    }

    .bg-line:nth-child(1) {
        width: 260px;
    }

    .bg-line:nth-child(2) {
        width: 215px;
    }

    .bg-line:nth-child(3) {
        width: 175px;
    }

    .bg-line {
        height: 9px;
        margin-bottom: 11px;
    }

    .bg-lines {
        top: 54px;
        left: 24px;
    }

    .wave-box {
        height: 55px;
    }

    .solution-showcase-row {
        grid-template-columns: 1fr;
        gap: 50px;
        align-items: center;
    }

    .solution-row-reverse {
        flex-direction: column;
    }

    .solution-showcase-image {
        order: 1;
        justify-content: center;
    }

    .solution-showcase-content {
        order: 2;
        max-width: 100%;
        margin: 0 auto;
    }

    .solution-showcase-image > img {
        max-width: 400px;
    }

    .solution-phone-stack {
        min-height: 400px;
    }

    .solution-showcase-title {
        font-size: 26px;
        margin-bottom: 12px;
        margin-top: 0;
        line-height: 1.2;
    }

    .solution-showcase-description {
        font-size: 14px;
        line-height: 1.4;
        max-width: 100%;
        margin-bottom: 14px;
    }

    .solution-showcase-list-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .solution-showcase-list {
        margin-bottom: 28px;
    }

    .solution-showcase-list li {
        font-size: 13px;
        gap: 10px;
        padding: 5px 0 5px 10px;
    }

    .solution-showcase-list li img {
        width: 18px;
        height: 18px;
    }

    .phone-top {
        top: 26px;
    }

    .phone-bottom {
        top: 110px;
    }

    .usecase-solutions-section {
        padding: 64px 16px 50px;
    }

    .usecase-solutions-container {
        max-width: 540px;
        gap: 50px;
    }

    .usecase-solutions-header {
        margin-bottom: 10px;
    }

    .usecase-solutions-heading,
    .usecase-solutions-heading span {
        font-size: 28px;
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .usecase-solutions-subheading {
        max-width: 500px;
        font-size: 15px;
        line-height: 1.45;
    }

    .solution-phone-stack,
    .industry-ai-wrap {
        max-width: 535px;
        min-height: 360px;
    }

    .ide-mockup-container,
    .qe-dashboard-wrap,
    .ai-cost-dashboard {
        max-width: 100%;
        min-height: auto;
    }

    .usecase-solutions-section .hero-industries-buttons .btn {
        min-width: 180px;
        height: 44px;
        padding: 0 16px;
        gap: 8px;
        font-size: 14px;
    }

    /*    .solutions-services-section {
            height: auto;
            min-height: 480px;
            padding: 70px 0;
        }*/
    .solutions-services-section {
        height: 400px;
        min-height: 400px;
        padding: 0px 0px;
    }

    .solutions-services-content {
        max-width: 90%;
    }

    .solutions-services-heading {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 14px;
    }

    .solutions-services-heading span {
        font-size: 28px;
    }

    .solutions-services-subheading {
        font-size: 15px;
        margin-bottom: 14px;
    }

    .solutions-services-description {
        font-size: 13.5px;
        line-height: 1.8;
        margin-bottom: 28px;
    }

    .solutions-services-section .hero-industries-buttons {
        flex-wrap: wrap;
        gap: 14px;
    }

    .solutions-services-section .hero-industries-buttons .btn {
        width: 190px;
        height: 46px;
        font-size: 12.5px;
    }

    .ai-services-section {
        padding: 60px 15px 0px 16px;
    }

    .solutions-services-page .stat-text {
        max-width: 200px;
    }

    .ai-services-header {
        margin-bottom: 20px;
    }

    .ai-services-heading {
        font-size: 28px;
    }

    .ai-services-heading span {
        font-size: 28px;
    }

    .ai-services-subheading {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Single column */
    .ai-services-grid {
        grid-template-columns: 1fr;
    }

    .ai-service-card,
    .ai-service-cta-card {
        padding: 28px 24px;
    }

    .ai-service-title {
        font-size: 18px;
        text-align: center;
    }

    .ai-service-description {
        font-size: 13.5px;
        line-height: 1.6;
    }

    .ai-service-tags span {
        font-size: 11px;
        padding: 7px 12px;
    }

    .ai-service-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ai-service-btn-primary,
    .ai-service-btn-secondary,
    .ai-services-main-btn {
        height: 40px;
        font-size: 12.5px;
    }

    .engagement-models-section {
        padding: 55px 18px 20px;
    }

    .engagement-models-container {
        max-width: 540px;
    }

    .engagement-models-header {
        margin-bottom: 22px;
    }

    .engagement-models-title {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .engagement-models-subtitle {
        font-size: 14.5px;
        line-height: 1.65;
        max-width: 500px;
    }

    /* Single column at tablet portrait */
    .engagement-models-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .engagement-column {
        gap: 16px;
    }

    /* Large card back to vertical column layout */
    .engagement-card-large {
        grid-column: 1 / -1;
        min-height: 360px;
        height: auto;
        padding: 35px 28px 25px 32px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        justify-content: flex-end;
    }

    /* Restore vertical hover for large card */
    .engagement-large-info {
        flex: none;
        align-self: stretch;
    }

    .engagement-large-hover {
        flex: none;
        position: absolute;
        left: 30px;
        right: 30px;
        bottom: 15px;
        opacity: 0;
        transform: translateY(40px);
        transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        align-self: auto;
    }

    .engagement-card-large:hover .engagement-large-info {
        transform: translateY(-172px);
    }

    .engagement-card-large:hover .engagement-large-hover {
        opacity: 1;
        transform: translateY(0);
    }

    .engagement-card-large h3 {
        font-size: 22px;
    }

    .engagement-card-icon {
        width: 72px;
        margin-bottom: 10px;
    }

    .engagement-large-hover li {
        font-size: 13px;
        margin-bottom: 5px;
    }

    .engagement-card,
    .engagement-card-image {
        height: 300px;
    }

    .engagement-card-text {
        left: 22px;
        bottom: 22px;
    }

    .engagement-card-text h3 {
        font-size: 20px;
    }

    .engagement-hover-panel {
        padding: 75px 22px 18px;
    }

    .engagement-hover-panel li {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .engagement-hover-panel ul {
        padding-left: 20px;
        margin-bottom: 25px;
        margin-top: 25px;
    }

    .engagement-card:hover .engagement-card-text {
        transform: translateY(-190px);
        /*transform: translateY(-130px);*/
    }

    .solutions-services-page .engagement-large-btn .btn.primary {
        min-width: 200px;
        padding: 12px 24px;
        font-size: 0.92rem;
    }

    .solutions-services-page .engagement-small-btn .btn.primary {
        padding: 10px 20px;
        font-size: 0.88rem;
    }
}

@media (min-width: 481px) and (max-width: 576px) {

    .ai-cost-dashboard {
        height: 400px;
        max-width: 100%;
    }

    .ai-cost-shell {
        border-radius: 22px;
        padding: 10px 4px 12px 38px;
    }

    /* Main card becomes fluid below tablet */
    .ai-cost-main {
        width: 100%;
        max-width: 340px;
        height: 348px;
        border-radius: 18px;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
    }

    .ai-cost-header {
        height: 46px;
        font-size: 15px;
    }

    .ai-cost-body {
        padding: 10px 16px 18px 16px;
    }

    .ai-cost-value {
        font-size: 24px;
    }

    .ai-cost-sub {
        font-size: 9px;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .ai-graph-card {
        height: 100px;
        padding: 11px;
        border-radius: 12px;
        margin-bottom: 5px;
    }

    .ai-graph-title {
        font-size: 9px;
    }

    .ai-cost-stats {
        gap: 8px;
        margin-bottom: 4px;
    }

    .ai-stat-card {
        padding: 6px;
        border-radius: 12px;
    }

    .ai-stat-card h4 {
        font-size: 12px;
    }

    .ai-stat-card span {
        font-size: 8px;
    }

    .ai-optimization-title {
        font-size: 9px;
        margin-top: 6px;
    }

    .ai-optimization-card {
        gap: 9px;
    }

    .opt-bar {
        width: 4px;
        height: 24px;
    }

    .ai-optimization-card h5 {
        font-size: 10px;
    }

    .ai-optimization-card p {
        font-size: 7px;
    }

    /* Floating card overlaps main card, scale down */
    .utilization-card {
        left: 0px;
        top: 56px;
        width: 142px;
        padding: 7px 10px 3px 10px;
        border-radius: 18px;
    }

    .utilization-card h3 {
        font-size: 11px;
        margin-bottom: 9px;
    }

    .util-item {
        margin-bottom: 3px;
    }

    .util-row {
        margin-bottom: 3px;
    }

    .util-row span {
        font-size: 8px;
    }

    .util-row strong {
        font-size: 9px;
    }

    .util-progress {
        height: 7px;
    }

    .predictive-title {
        font-size: 9px;
    }

    .predictive-card {
        border-radius: 10px;
    }

    .predictive-card span {
        font-size: 8px;
    }

    .predictive-card h4 {
        font-size: 11px;
    }

    .saved-card {
        border-radius: 10px;
        margin-top: 3px;
    }

    .saved-card span {
        font-size: 8px;
    }

    .saved-card h4 {
        font-size: 11px;
    }

    .industry-ai-wrap {
        min-height: 400px;
        max-width: 100%;
    }

    .industry-ai-shell {
        border-radius: 24px;
        padding: 18px 18px 18px 18px;
    }

    .industry-ai-waves {
        height: 150px;
    }

    /* Dashboard becomes fluid below tablet */
    .industry-ai-dashboard {
        width: 100%;
        max-width: 350px;
        height: 320px;
        border-radius: 18px;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
    }

    .industry-ai-header {
        height: 46px;
        font-size: 15px;
    }

    .industry-ai-list {
        gap: 4px;
        padding: 8px 6px 0px 18px;
    }

    .industry-ai-content {
        gap: 9px;
        border-radius: 13px;
    }

    .industry-ai-icon {
        height: 44px;
        width: 8px;
        min-width: 8px;
    }

    .industry-ai-image {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        min-width: 22px !important;
        flex: 0 0 22px;
    }

    .industry-ai-text h5 {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .industry-ai-text p {
        font-size: 7px;
    }

    .industry-score-card {
        right: 4px;
        top: 72px;
        width: 144px;
        height: 232px;
        padding: 10px;
        border-radius: 18px;
    }

    .industry-score-card h4 {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .industry-score-card hr {
        margin-bottom: 6px;
    }

    .industry-chart {
        margin-bottom: 6px;
    }

    .industry-chart-ring {
        width: 82px;
        height: 82px;
    }

    .industry-chart-ring::after {
        inset: 14px;
    }

    .industry-chart-ring svg {
        width: 82px;
        height: 82px;
    }

    .industry-chart-center strong {
        font-size: 12px;
    }

    .industry-chart-center span {
        font-size: 7px;
    }

    .industry-legend li {
        font-size: 9px;
        gap: 5px;
        margin-bottom: 2px;
    }

    .dot {
        width: 6px;
        height: 6px;
    }

    .qe-dashboard-wrap {
        min-height: 400px;
        max-width: 100%;
    }

    .qe-dashboard-shell {
        border-radius: 24px;
        padding: 20px 22px 20px 22px;
    }

    .qe-bg-left-img {
        width: 240px;
        height: 230px;
        top: 60px;
    }

    .qe-bg-right-img {
        width: 125px;
        height: 158px;
        right: -20px;
        top: 90px;
    }

    /* Panel becomes fluid width on small screens */
    .qe-dashboard-panel {
        height: 310px;
        width: 100%;
        /*    max-width: 340px;*/
        padding: 20px 22px 12px 20px;
        border-radius: 18px;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.43);
    }

    .qe-dashboard-title {
        font-size: 16px;
        margin-bottom: 11px;
    }

    .qe-stat-grid {
        gap: 14px;
        margin-bottom: 11px;
    }

    .qe-mini-stat {
        width: 72px;
        height: 56px;
        padding: 8px;
        border-radius: 12px;
    }

    .qe-stat-number {
        font-size: 13px;
    }

    .qe-stat-label {
        font-size: 8px;
    }

    .qe-graph-card {
        height: 100px;
        padding: 12px;
        border-radius: 13px;
        margin-bottom: 11px;
    }

    .qe-graph-title {
        font-size: 10px;
        margin-bottom: 18px;
    }

    .qe-graph-container {
        height: 78px;
    }

    .qe-test-title {
        font-size: 10px;
    }

    .qe-test-list li {
        font-size: 9px;
        padding-left: 12px;
        margin-bottom: 4px;
    }

    .qe-test-list li::before {
        width: 5px;
        height: 5px;
    }

    /* Score card scaled to fit */
    /*    .qe-score-card {
            top: 64px;
            right: 4px;
            width: 148px;
            height: 240px;
            padding: 16px;
            border-radius: 18px;
        }*/
    /*    .qe-score-card {
            top: 127px;
            right: 39px;
            width: 148px;
            height: 223px;
            padding: 16px;
            border-radius: 18px;
        }*/
    .qe-score-card {
        top: 127px;
        right: 14px;
        width: 148px;
        height: 223px;
        padding: 16px;
        border-radius: 18px;
    }

    .qe-score-title {
        font-size: 14px;
    }

    .qe-score-card hr {
        margin-bottom: 6px;
    }

    .qe-grade {
        font-size: 34px;
    }

    .qe-grade-sub {
        font-size: 10px;
        max-width: 116px;
        margin-bottom: 10px;
    }

    .qe-span {
        font-size: 10px;
    }

    .qe-progress {
        width: 108px;
        height: 8px;
    }

    .qe-score-row {
        font-size: 11px;
        max-width: 106px;
    }

    .qe-score-item {
        margin-bottom: 14px;
    }

    .qe-score-card strong {
        font-size: 11px;
    }

    .ide-mockup-container {
        min-height: 400px;
        max-width: 100%;
    }

    .ide-frame {
        border-radius: 24px;
        padding: 20px 24px 18px 20px;
    }

    .ide-window {
        height: 310px;
        width: 100%;
        max-width: 360px;
        border-radius: 16px;
    }

    .ide-header {
        padding: 11px 14px;
    }

    .ide-header .dots span {
        height: 8px;
        width: 8px;
        margin-right: 6px;
    }

    .ide-content {
        padding: 20px;
    }

    .typing-container .line {
        font-size: 11px;
    }

    .predict-highlight {
        width: 190px;
        font-size: 10px;
        padding: 4px 8px;
    }

    /* Metrics card - reposition to stay within frame on smaller screen */
    .metrics-card {
        right: 4px;
        top: 105px;
        width: 145px;
        height: 220px;
        padding: 14px;
        border-radius: 18px;
    }

    .metrics-card h4 {
        font-size: 14px;
    }

    .metrics-card hr {
        margin: 8px 0;
    }

    .pct-val,
    .speed-val,
    .bug-val {
        font-size: 13px;
    }

    .code-quality-label,
    .ship-speed-label,
    .bug-rate-label {
        font-size: 9px;
    }

    .ai-suggestion {
        bottom: 38px;
        left: 28px;
        width: calc(100% - 56px);
        max-width: 300px;
        height: auto;
        min-height: 84px;
        padding: 12px;
        border-radius: 14px;
    }

    .ai-tag {
        font-size: 13px;
    }

    .ai-para {
        font-size: 10px;
        max-width: 100%;
    }

    .bg-line:nth-child(1) {
        width: 220px;
    }

    .bg-line:nth-child(2) {
        width: 180px;
    }

    .bg-line:nth-child(3) {
        width: 145px;
    }

    .bg-line {
        height: 8px;
        margin-bottom: 10px;
    }

    .bg-lines {
        top: 48px;
        left: 20px;
    }

    .wave-box {
        height: 50px;
    }

    .solution-showcase-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .solution-row-reverse {
        flex-direction: column;
    }

    .solution-showcase-image {
        order: 1;
        justify-content: center;
    }

    .solution-showcase-content {
        order: 2;
        max-width: 100%;
    }

    .solution-showcase-image > img {
        max-width: 360px;
    }

    .solution-phone-stack {
        min-height: 360px;
    }

    .solution-showcase-title {
        font-size: 24px;
        margin-bottom: 10px;
        margin-top: 0;
        line-height: 1.2;
    }

    .solution-showcase-description {
        font-size: 14px;
        line-height: 1.4;
        max-width: 100%;
        margin-bottom: 14px;
    }

    .solution-showcase-list-title {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .solution-showcase-list {
        margin-bottom: 24px;
    }

    .solution-showcase-list li {
        font-size: 13px;
        gap: 8px;
        padding: 5px 0 5px 8px;
    }

    .solution-showcase-list li::after,
    .solution-showcase-list li:first-child::before {
        width: 85%;
    }

    .solution-showcase-list li img {
        width: 16px;
        height: 16px;
    }

    .phone-top {
        top: 24px;
    }

    .phone-bottom {
        top: 100px;
    }

    .usecase-solutions-section {
        padding: 56px 14px 44px;
    }

    .usecase-solutions-container {
        max-width: 100%;
        gap: 22px;
    }

    .usecase-solutions-header {
        margin-bottom: 8px;
    }

    .usecase-solutions-heading,
    .usecase-solutions-heading span {
        font-size: 26px;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .usecase-solutions-subheading {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.45;
        padding: 0 8px;
    }

    .solution-phone-stack,
    .ide-mockup-container,
    .qe-dashboard-wrap,
    .industry-ai-wrap,
    .ai-cost-dashboard {
        max-width: 100%;
        min-height: 340px;
    }

    .usecase-solutions-section .hero-industries-buttons .btn {
        min-width: 100%;
        width: 100%;
        height: 44px;
        padding: 0 16px;
        gap: 8px;
        font-size: 14px;
    }

    .solutions-services-section {
        /*      height: auto;*/
        min-height: 500px;
        padding: 65px 0;
    }

    .solutions-services-container {
        padding: 0 16px;
    }

    .solutions-services-content {
        max-width: 100%;
    }

    .solutions-services-heading {
        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .solutions-services-heading span {
        font-size: 24px;
    }

    .solutions-services-subheading {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .solutions-services-description {
        font-size: 13px;
        line-height: 1.75;
        margin-bottom: 26px;
    }

    .solutions-services-section .hero-industries-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .solutions-services-section .hero-industries-buttons .btn {
        width: 100%;
        max-width: 300px;
        height: 46px;
        font-size: 12px;
    }

    .ai-services-section {
        padding: 55px 12px 0px;
    }

    .ai-services-header {
        margin-bottom: 20px;
    }

    .ai-services-heading {
        font-size: 24px;
    }

    .ai-services-heading span {
        font-size: 24px;
    }

    .ai-services-subheading {
        font-size: 13.5px;
        line-height: 1.6;
    }

    .ai-services-grid {
        grid-template-columns: 1fr;
    }

    .ai-service-card,
    .ai-service-cta-card {
        padding: 26px 20px;
    }

    .ai-service-title {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .ai-service-description {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .ai-service-tags {
        gap: 7px;
        margin-bottom: 24px;
    }

    .ai-service-tags span {
        font-size: 10.5px;
        padding: 6px 10px;
    }

    .ai-service-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-service-btn-primary,
    .ai-service-btn-secondary,
    .ai-services-main-btn {
        width: 100%;
        height: 42px;
        font-size: 12px;
    }

    .engagement-models-section {
        padding: 45px 14px 55px;
    }

    .engagement-models-container {
        max-width: 100%;
    }

    .engagement-models-header {
        margin-bottom: 20px;
    }

    .engagement-models-title {
        font-size: 24px;
        margin-bottom: 9px;
    }

    .engagement-models-subtitle {
        font-size: 13.5px;
        line-height: 1.6;
        padding: 0 6px;
    }

    .engagement-models-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .engagement-column {
        gap: 14px;
    }

    .engagement-card-large {
        grid-column: 1 / -1;
        min-height: 320px;
        height: auto;
        padding: 30px 22px 22px 26px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        justify-content: flex-end;
    }

    .engagement-large-info {
        flex: none;
        align-self: stretch;
    }

    .engagement-large-hover {
        flex: none;
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 22px;
        opacity: 0;
        transform: translateY(40px);
        transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .engagement-card-large:hover .engagement-large-info {
        transform: translateY(-180px);
    }

    .engagement-card-large:hover .engagement-large-hover {
        opacity: 1;
        transform: translateY(0);
    }

    .engagement-card-large h3 {
        font-size: 20px;
    }

    .engagement-card-icon {
        width: 62px;
        margin-bottom: 8px;
    }

    .engagement-large-hover li {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .engagement-large-hover ul {
        margin-bottom: 14px;
    }

    .engagement-card,
    .engagement-card-image {
        height: 280px;
    }

    .engagement-card-text {
        left: 18px;
        bottom: 18px;
    }

    .engagement-card-text h3 {
        font-size: 18px;
    }

    .engagement-hover-panel {
        padding: 65px 18px 16px;
    }

    .engagement-hover-panel li {
        font-size: 11.5px;
    }

    .engagement-card:hover .engagement-card-text {
        transform: translateY(-180px);
        /*transform: translateY(-115px);*/
    }

    .engagement-divider {
        width: 42px;
        margin-bottom: 12px;
    }

    .solutions-services-page .engagement-large-btn .btn.primary {
        min-width: 180px;
        padding: 11px 20px;
        font-size: 0.85rem;
    }

    .solutions-services-page .engagement-small-btn .btn.primary {
        padding: 9px 18px;
        font-size: 0.82rem;
    }

    .solutions-services-page .hero-industries-buttons .btn-text {
        font-size: 11px;
    }
}

@media (min-width: 361px) and (max-width: 480px) {


    .ai-cost-dashboard {
        height: 380px;
        max-width: 100%;
    }

    .ai-cost-shell {
        border-radius: 18px;
        padding: 8px 4px 10px 30px;
    }

    .ai-cost-main {
        width: 100%;
        max-width: 100%;
        height: 326px;
        border-radius: 14px;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
    }

    .ai-cost-header {
        height: 40px;
        font-size: 13px;
    }

    .ai-cost-body {
        padding: 8px 12px 14px 12px;
    }

    .ai-cost-value {
        font-size: 22px;
    }

    .ai-cost-sub {
        font-size: 8px;
        margin-top: 3px;
        margin-bottom: 4px;
    }

    .ai-graph-card {
        height: 88px;
        padding: 9px;
        border-radius: 11px;
        margin-bottom: 5px;
    }

    .ai-graph-title {
        font-size: 8px;
    }

    .ai-cost-stats {
        gap: 6px;
        margin-bottom: 3px;
    }

    .ai-stat-card {
        padding: 5px;
        border-radius: 10px;
    }

    .ai-stat-card h4 {
        font-size: 11px;
    }

    .ai-stat-card span {
        font-size: 7px;
    }

    .ai-optimization-title {
        font-size: 8px;
        margin-top: 5px;
    }

    .ai-optimization-card {
        gap: 7px;
    }

    .opt-bar {
        width: 4px;
        height: 22px;
    }

    .ai-optimization-card h5 {
        font-size: 9px;
    }

    .ai-optimization-card p {
        font-size: 6px;
    }

    .utilization-card {
        left: 0px;
        top: 50px;
        width: 124px;
        padding: 6px 9px 3px 9px;
        border-radius: 16px;
    }

    .utilization-card h3 {
        font-size: 10px;
        margin-bottom: 8px;
    }

    .util-item {
        margin-bottom: 3px;
    }

    .util-row {
        margin-bottom: 2px;
    }

    .util-row span {
        font-size: 7px;
    }

    .util-row strong {
        font-size: 8px;
    }

    .util-progress {
        height: 6px;
    }

    .predictive-title {
        font-size: 8px;
    }

    .predictive-card {
        border-radius: 9px;
    }

    .predictive-card span {
        font-size: 7px;
    }

    .predictive-card h4 {
        font-size: 10px;
    }

    .saved-card {
        border-radius: 9px;
        margin-top: 2px;
    }

    .saved-card span {
        font-size: 7px;
    }

    .saved-card h4 {
        font-size: 10px;
    }

    .industry-ai-wrap {
        min-height: 380px;
        max-width: 100%;
    }

    .industry-ai-shell {
        border-radius: 20px;
        padding: 14px 14px 14px 14px;
    }

    .industry-ai-waves {
        height: 130px;
    }

    .industry-ai-dashboard {
        width: 100%;
        max-width: 100%;
        height: 300px;
        border-radius: 16px;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
    }

    .industry-ai-header {
        height: 42px;
        font-size: 13px;
    }

    .industry-ai-list {
        gap: 3px;
        padding: 6px 4px 0px 14px;
    }

    .industry-ai-content {
        gap: 8px;
        border-radius: 11px;
    }

    .industry-ai-icon {
        height: 40px;
        width: 7px;
        min-width: 7px;
    }

    .industry-ai-image {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        min-width: 20px !important;
        flex: 0 0 20px;
    }

    .industry-ai-text h5 {
        font-size: 9px;
        margin-bottom: 2px;
    }

    .industry-ai-text p {
        font-size: 7px;
        line-height: 1.2;
    }

    .industry-score-card {
        right: 3px;
        top: 64px;
        width: 128px;
        height: 212px;
        padding: 9px;
        border-radius: 16px;
    }

    .industry-score-card h4 {
        font-size: 11px;
        margin-bottom: 5px;
    }

    .industry-score-card hr {
        margin-bottom: 5px;
    }

    .industry-chart {
        margin-bottom: 5px;
    }

    .industry-chart-ring {
        width: 72px;
        height: 72px;
    }

    .industry-chart-ring::after {
        inset: 12px;
    }

    .industry-chart-ring svg {
        width: 72px;
        height: 72px;
    }

    .industry-chart-center strong {
        font-size: 11px;
    }

    .industry-chart-center span {
        font-size: 6px;
    }

    .industry-legend li {
        font-size: 8px;
        gap: 4px;
        margin-bottom: 2px;
    }

    .dot {
        width: 5px;
        height: 5px;
    }

    .qe-dashboard-wrap {
        min-height: 380px;
        max-width: 100%;
    }

    .qe-dashboard-shell {
        border-radius: 20px;
        padding: 16px 16px 16px 16px;
    }

    .qe-bg-left-img {
        width: 200px;
        height: 192px;
        top: 56px;
    }

    .qe-bg-right-img {
        width: 105px;
        height: 132px;
        right: -16px;
        top: 80px;
    }

    .qe-dashboard-panel {
        height: 290px;
        width: 100%;
        max-width: 100%;
        padding: 16px 16px 10px 16px;
        border-radius: 14px;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.43);
    }

    .qe-dashboard-title {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .qe-stat-grid {
        gap: 10px;
        margin-bottom: 10px;
    }

    .qe-mini-stat {
        width: 64px;
        height: 50px;
        padding: 6px;
        border-radius: 11px;
    }

    .qe-stat-number {
        font-size: 12px;
    }

    .qe-stat-label {
        font-size: 8px;
    }

    .qe-graph-card {
        height: 90px;
        padding: 10px;
        border-radius: 12px;
        margin-bottom: 10px;
    }

    .qe-graph-title {
        font-size: 9px;
        margin-bottom: 14px;
    }

    .qe-graph-container {
        height: 68px;
    }

    .qe-test-title {
        font-size: 9px;
        margin-bottom: 3px;
    }

    .qe-test-list li {
        font-size: 8px;
        padding-left: 10px;
        margin-bottom: 3px;
    }

    .qe-test-list li::before {
        width: 4px;
        height: 4px;
    }

    /* Score card needs to be narrower on small mobile */
    /*    .qe-score-card {
            top: 58px;
            right: 3px;
            width: 132px;
            height: 218px;
            padding: 12px;
            border-radius: 16px;
        }*/
    .qe-score-card {
        top: 120px;
        right: -12px;
        width: 132px;
        height: 200px;
        padding: 12px;
        border-radius: 16px;
    }

    .qe-score-title {
        font-size: 13px;
    }

    .qe-score-card hr {
        margin-bottom: 5px;
    }

    .qe-grade {
        font-size: 30px;
    }

    .qe-grade-sub {
        font-size: 9px;
        max-width: 102px;
        margin-bottom: 9px;
    }

    .qe-span {
        font-size: 9px;
    }

    .qe-progress {
        width: 96px;
        height: 7px;
    }

    .qe-score-row {
        font-size: 10px;
        max-width: 95px;
    }

    .qe-score-item {
        margin-bottom: 12px;
    }

    .qe-score-card strong {
        font-size: 10px;
    }

    .ide-mockup-container {
        min-height: 380px;
        max-width: 100%;
    }

    .ide-frame {
        border-radius: 20px;
        padding: 16px 18px 16px 16px;
    }

    .ide-window {
        height: 290px;
        width: 100%;
        max-width: 100%;
        border-radius: 14px;
    }

    .ide-header {
        padding: 10px 12px;
    }

    .ide-header .dots span {
        height: 7px;
        width: 7px;
        margin-right: 5px;
    }

    .ide-content {
        padding: 16px;
    }

    .typing-container .line {
        font-size: 10px;
    }

    .predict-highlight {
        width: 160px;
        font-size: 9px;
        padding: 3px 6px;
    }

    /* Metrics card moves under the IDE window on small mobile for readability */
    .metrics-card {
        right: 4px;
        top: 90px;
        width: 130px;
        height: 195px;
        padding: 12px;
        border-radius: 16px;
    }

    .metrics-card h4 {
        font-size: 13px;
    }

    .metrics-card hr {
        margin: 7px 0;
    }

    .pct-val,
    .speed-val,
    .bug-val {
        font-size: 12px;
    }

    .code-quality-label,
    .ship-speed-label,
    .bug-rate-label {
        font-size: 9px;
    }

    .progress-bar {
        height: 5px;
        margin: 6px 0;
    }

    .ai-suggestion {
        bottom: 30px;
        left: 20px;
        width: calc(100% - 40px);
        height: auto;
        min-height: 76px;
        padding: 10px;
        border-radius: 12px;
    }

    .ai-tag {
        font-size: 12px;
    }

    .ai-para {
        font-size: 9px;
        max-width: 100%;
    }

    .bg-line:nth-child(1) {
        width: 180px;
    }

    .bg-line:nth-child(2) {
        width: 145px;
    }

    .bg-line:nth-child(3) {
        width: 115px;
    }

    .bg-line {
        height: 7px;
        margin-bottom: 9px;
    }

    .bg-lines {
        top: 42px;
        left: 16px;
    }

    .wave-box {
        height: 45px;
    }

    .solution-showcase-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .solution-row-reverse {
        flex-direction: column;
    }

    .solution-showcase-image {
        order: 1;
        justify-content: center;
    }

    .solution-showcase-content {
        order: 2;
        max-width: 100%;
    }

    .solution-showcase-image > img {
        max-width: 300px;
    }

    .solution-phone-stack {
        min-height: 320px;
    }

    .solution-showcase-title {
        font-size: 22px;
        margin-bottom: 10px;
        margin-top: 0;
        line-height: 1.2;
    }

    .solution-showcase-description {
        font-size: 13px;
        line-height: 1.4;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .solution-showcase-list-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .solution-showcase-list {
        margin-bottom: 20px;
    }

    .solution-showcase-list li {
        font-size: 12px;
        gap: 8px;
        padding: 4px 0 4px 8px;
    }

    .solution-showcase-list li::after,
    .solution-showcase-list li:first-child::before {
        width: 90%;
    }

    .solution-showcase-list li img {
        width: 16px;
        height: 16px;
    }

    .phone-top {
        top: 20px;
    }

    .phone-bottom {
        top: 90px;
    }

    /* Keyframes adjustment for smaller drop distance */
    .solution-phone-stack.animate .phone-bottom {
        animation: bottomFallMobile 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .solution-phone-stack.animate .phone-top {
        animation: topFallMobile 4.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: 0.35s;
    }

    @keyframes bottomFallMobile {
        0% {
            opacity: 0;
            transform: translate(-52%, -160px) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: translate(-52%, 0) rotate(0deg);
        }
    }

    @keyframes topFallMobile {
        0% {
            opacity: 0;
            transform: translate(-52%, -220px) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: translate(-52%, 0) rotate(0deg);
        }
    }
    .usecase-solutions-section {
        padding: 48px 12px 40px;
    }

    .usecase-solutions-container {
        max-width: 100%;
        gap: 20px;
    }

    .usecase-solutions-header {
        margin-bottom: 6px;
    }

    .usecase-solutions-heading,
    .usecase-solutions-heading span {
        font-size: 25px;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .usecase-solutions-subheading {
        max-width: 100%;
        font-size: 13px;
        line-height: 1.45;
        padding: 0 6px;
        text-align: justify;
    }

    .solution-phone-stack,
    .ide-mockup-container,
    .qe-dashboard-wrap,
    .industry-ai-wrap,
    .ai-cost-dashboard {
        max-width: 100%;
        min-height: 320px;
    }

    .usecase-solutions-section .hero-industries-buttons .btn {
        min-width: 100%;
        width: 100%;
        height: 42px;
        padding: 0 14px;
        gap: 8px;
        font-size: 13px;
    }

    /*    .solutions-services-section {
            height: auto;
            min-height: 480px;
            padding: 0px 0;
        }*/
    .solutions-services-section {
        height: 100vh; /* height: 400px;*/
        min-height: 400px;
        padding: 0px 0px;
    }

    .solutions-services-container {
        padding: 0 14px;
    }

    .solutions-services-heading {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .solutions-services-heading span {
        font-size: 22px;
    }

    .solutions-services-subheading {
        font-size: 13.5px;
        margin-bottom: 12px;
    }

    .solutions-services-description {
        font-size: 12.5px;
        line-height: 1.75;
        margin-bottom: 24px;
        text-align: justify;
        max-width: 264px;
    }

    .solutions-services-section .hero-industries-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .solutions-services-section .hero-industries-buttons .btn {
        width: 100%;
        max-width: 280px;
        height: 44px;
        font-size: 11.5px;
    }

    .ai-services-section {
        padding: 50px 30px 0px;
    }

    .ai-services-heading {
        font-size: 25px;
        margin-bottom: 14px;
    }

    .ai-services-heading span {
        font-size: 25px;
    }

    .ai-services-subheading {
        font-size: 13px;
        line-height: 1.6;
        text-align: justify;
    }

    .ai-services-grid {
        grid-template-columns: 1fr;
    }

    .ai-service-card,
    .ai-service-cta-card {
        padding: 24px 18px;
    }

    .ai-services-header {
        margin-bottom: 30px;
    }

    .ai-service-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .ai-service-description {
        font-size: 12.5px;
        margin-bottom: 18px;
        text-align: justify;
    }

    .ai-service-tags {
        gap: 6px;
        margin-bottom: 20px;
    }

    .ai-service-tags span {
        font-size: 10px;
        padding: 6px 10px;
    }

    .ai-service-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .ai-service-btn-primary,
    .ai-service-btn-secondary,
    .ai-services-main-btn {
        width: 100%;
        height: 42px;
        font-size: 11.5px;
    }

    .engagement-models-section {
        padding: 40px 12px 50px;
    }

    .engagement-models-container {
        max-width: 100%;
    }

    .engagement-models-header {
        margin-bottom: 18px;
    }

    .engagement-models-title {
        font-size: 22px;
        margin-bottom: 8px;
        line-height: 1.25;
    }

    .engagement-models-subtitle {
        font-size: 12.5px;
        line-height: 1.6;
        padding: 0 4px;
    }

    .engagement-models-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .engagement-column {
        gap: 12px;
    }

    .engagement-card-large {
        grid-column: 1 / -1;
        min-height: 300px;
        height: auto;
        padding: 28px 20px 22px 22px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        justify-content: flex-end;
    }

    .engagement-large-info {
        flex: none;
        align-self: stretch;
    }

    .engagement-large-hover {
        flex: none;
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 20px;
        opacity: 0;
        transform: translateY(40px);
        transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .engagement-card-large:hover .engagement-large-info {
        transform: translateY(-170px);
    }

    .engagement-card-large:hover .engagement-large-hover {
        opacity: 1;
        transform: translateY(0);
    }

    .engagement-card-large h3 {
        font-size: 18px;
    }

    .engagement-card-icon {
        width: 56px;
        margin-bottom: 8px;
    }

    .engagement-large-hover li {
        font-size: 11.5px;
        margin-bottom: 4px;
    }

    .engagement-large-hover ul {
        margin-bottom: 12px;
        padding-left: 18px;
    }

    .engagement-card,
    .engagement-card-image {
        height: 260px;
    }

    .engagement-card-text {
        left: 16px;
        bottom: 16px;
    }

    .engagement-card-text h3 {
        font-size: 17px;
    }

    .engagement-hover-panel {
        padding: 60px 16px 14px;
    }

    .engagement-hover-panel ul {
        padding-left: 18px;
        margin-bottom: 18px;
    }

    .engagement-hover-panel li {
        font-size: 11px;
    }

    .engagement-card:hover .engagement-card-text {
        transform: translateY(-170px);
        /*transform: translateY(-108px);*/
    }

    .engagement-divider {
        width: 38px;
        margin-bottom: 11px;
    }

    .solutions-services-page .engagement-large-btn .btn.primary {
        min-width: 160px;
        padding: 10px 18px;
        font-size: 0.8rem;
    }

    .solutions-services-page .engagement-small-btn .btn.primary {
        padding: 8px 15px;
        font-size: 0.78rem;
    }

    .solutions-services-page .hero-industries-buttons .btn-text {
        font-size: 10.5px;
        letter-spacing: 0.2px;
    }
}


@media (max-width: 360px) {

    .solutions-services-page .stat-text {
        max-width: 195px;
    }

    .ai-cost-dashboard {
        /*      height: 360px;*/
        height: 317px;
        max-width: 100%;
    }

    .ai-cost-shell {
        border-radius: 16px;
        padding: 7px 3px 9px 24px;
    }

    .ai-cost-main {
        width: 100%;
        max-width: 100%;
        height: 275px;
        border-radius: 12px;
        box-shadow: 0 0 0 3.5px rgba(255, 255, 255, 0.5);
    }

    .ai-cost-header {
        height: 36px;
        font-size: 12px;
    }

    .ai-cost-body {
        padding: 7px 10px 12px 10px;
    }

    .ai-cost-value {
        font-size: 20px;
    }

    .ai-cost-sub {
        font-size: 7px;
        margin-top: 3px;
        margin-bottom: 3px;
    }

    .ai-graph-card {
        height: 78px;
        padding: 8px;
        border-radius: 10px;
        margin-bottom: 4px;
    }

    .ai-graph-title {
        font-size: 7px;
    }

    .ai-cost-stats {
        gap: 5px;
        margin-bottom: 3px;
    }

    .ai-stat-card {
        padding: 4px;
        border-radius: 9px;
    }

    .ai-stat-card h4 {
        font-size: 10px;
    }

    .ai-stat-card span {
        font-size: 6px;
    }

    .ai-optimization-title {
        font-size: 7px;
        margin-top: 4px;
    }

    .ai-optimization-card {
        gap: 6px;
    }

    .opt-bar {
        width: 3px;
        height: 20px;
        margin-top: 10px;
    }

    .ai-optimization-card h5 {
        font-size: 8px;
        margin-top: 10px;
    }

    .ai-optimization-card p {
        font-size: 6px;
    }

    .utilization-card {
        left: 0px;
        top: 44px;
        width: 108px;
        padding: 5px 7px 2px 7px;
        border-radius: 14px;
    }

    .utilization-card h3 {
        font-size: 9px;
        margin-bottom: 7px;
    }

    .util-item {
        margin-bottom: 2px;
    }

    .util-row {
        margin-bottom: 2px;
    }

    .util-row span {
        font-size: 6px;
    }

    .util-row strong {
        font-size: 7px;
    }

    .util-progress {
        height: 5px;
    }

    .predictive-title {
        font-size: 7px;
    }

    .predictive-card {
        border-radius: 8px;
    }

    .predictive-card span {
        font-size: 6px;
    }

    .predictive-card h4 {
        font-size: 9px;
    }

    .saved-card {
        border-radius: 8px;
        margin-top: 2px;
    }

    .saved-card span {
        font-size: 6px;
    }

    .saved-card h4 {
        font-size: 9px;
    }

    .industry-ai-wrap {
        min-height: 360px;
        max-width: 100%;
    }

    .industry-ai-shell {
        border-radius: 18px;
        padding: 12px 10px 12px 10px;
    }

    .industry-ai-waves {
        height: 115px;
    }

    .industry-ai-dashboard {
        width: 100%;
        max-width: 100%;
        height: 280px;
        border-radius: 14px;
        box-shadow: 0 0 0 3.5px rgba(255, 255, 255, 0.5);
    }

    .industry-ai-header {
        height: 38px;
        font-size: 12px;
    }

    .industry-ai-list {
        gap: 3px;
        padding: 5px 3px 0px 12px;
    }

    .industry-ai-content {
        gap: 7px;
        border-radius: 10px;
    }

    .industry-ai-icon {
        height: 36px;
        width: 6px;
        min-width: 6px;
    }

    .industry-ai-image {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        min-width: 18px !important;
        flex: 0 0 18px;
    }

    .industry-ai-text h5 {
        font-size: 8px;
        margin-bottom: 1px;
    }

    .industry-ai-text p {
        font-size: 6px;
        line-height: 1.2;
    }

    .industry-score-card {
        right: 2px;
        top: 56px;
        width: 114px;
        height: 192px;
        padding: 8px;
        border-radius: 14px;
    }

    .industry-score-card h4 {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .industry-score-card hr {
        margin-bottom: 4px;
    }

    .industry-chart {
        margin-bottom: 4px;
    }

    .industry-chart-ring {
        width: 64px;
        height: 64px;
    }

    .industry-chart-ring::after {
        inset: 10px;
    }

    .industry-chart-ring svg {
        width: 64px;
        height: 64px;
    }

    .industry-chart-center strong {
        font-size: 10px;
    }

    .industry-chart-center span {
        font-size: 5px;
    }

    .industry-legend li {
        font-size: 7px;
        gap: 4px;
        margin-bottom: 1px;
    }

    .dot {
        width: 5px;
        height: 5px;
    }

    .qe-dashboard-wrap {
        min-height: 360px;
        max-width: 100%;
    }

    .qe-dashboard-shell {
        border-radius: 18px;
        padding: 14px 12px 14px 12px;
    }

    .qe-bg-left-img {
        width: 180px;
        height: 172px;
        top: 50px;
    }

    .qe-bg-right-img {
        width: 92px;
        height: 116px;
        right: -14px;
        top: 72px;
    }

    .qe-dashboard-panel {
        height: 272px;
        width: 100%;
        max-width: 100%;
        padding: 14px 14px 9px 14px;
        border-radius: 12px;
        box-shadow: 0 0 0 3.5px rgba(255, 255, 255, 0.43);
    }

    .qe-dashboard-title {
        font-size: 13px;
        margin-bottom: 9px;
    }

    .qe-stat-grid {
        gap: 8px;
        margin-bottom: 9px;
    }

    .qe-mini-stat {
        width: 58px;
        height: 46px;
        padding: 5px;
        border-radius: 10px;
    }

    .qe-stat-number {
        font-size: 11px;
    }

    .qe-stat-label {
        font-size: 7px;
    }

    .qe-graph-card {
        height: 82px;
        padding: 9px;
        border-radius: 11px;
        margin-bottom: 9px;
    }

    .qe-graph-title {
        font-size: 8px;
        margin-bottom: 12px;
    }

    .qe-graph-container {
        height: 60px;
    }

    .qe-test-title {
        font-size: 8px;
        margin-bottom: 3px;
    }

    .qe-test-list li {
        font-size: 7px;
        padding-left: 8px;
        margin-bottom: 2px;
    }

    .qe-test-list li::before {
        width: 4px;
        height: 4px;
    }

    /*    .qe-score-card {
            top: 52px;
            right: 2px;
            width: 118px;
            height: 200px;
            padding: 10px;
            border-radius: 14px;
        }*/
    .qe-score-card {
        top: 107px;
        right: -14px;
        width: 118px;
        height: 200px;
        padding: 10px;
        border-radius: 14px;
    }

    .qe-score-title {
        font-size: 12px;
    }

    .qe-score-card hr {
        margin-bottom: 4px;
    }

    .qe-grade {
        font-size: 26px;
    }

    .qe-grade-sub {
        font-size: 8px;
        max-width: 92px;
        margin-bottom: 8px;
    }

    .qe-span {
        font-size: 8px;
    }

    .qe-progress {
        width: 84px;
        height: 6px;
    }

    .qe-score-row {
        font-size: 9px;
        max-width: 83px;
    }

    .qe-score-item {
        margin-bottom: 10px;
    }

    .qe-score-card strong {
        font-size: 9px;
    }

    .ide-mockup-container {
        min-height: 360px;
        max-width: 100%;
    }

    .ide-frame {
        border-radius: 18px;
        padding: 14px 14px 14px 14px;
    }

    .ide-window {
        height: 270px;
        width: 100%;
        max-width: 100%;
        border-radius: 12px;
    }

    .ide-header {
        padding: 9px 11px;
    }

    .ide-header .dots span {
        height: 6px;
        width: 6px;
        margin-right: 4px;
    }

    .ide-content {
        padding: 14px;
    }

    .typing-container .line {
        font-size: 9px;
    }

    .predict-highlight {
        width: 140px;
        font-size: 8px;
        padding: 3px 5px;
    }

    .metrics-card {
        right: 0px;
        top: 82px;
        width: 115px;
        /*      height: 175px;*/
        height: 203px;
        padding: 10px;
        border-radius: 14px;
        z-index: 10;
    }

    .metrics-card h4 {
        font-size: 12px;
    }

    .metrics-card hr {
        margin: 6px 0;
    }


    .pct-val,
    .speed-val,
    .bug-val {
        font-size: 11px;
    }

    .code-quality-label,
    .ship-speed-label,
    .bug-rate-label {
        font-size: 8px;
    }

    .progress-bar {
        height: 4px;
        margin: 5px 0;
    }

    .ai-suggestion {
        bottom: 24px;
        left: 16px;
        width: calc(100% - 32px);
        height: auto;
        min-height: 68px;
        padding: 9px;
        border-radius: 10px;
    }

    .ai-tag {
        font-size: 11px;
    }

    .ai-para {
        font-size: 8px;
        max-width: 100%;
        line-height: 1.4;
    }

    .bg-line:nth-child(1) {
        width: 150px;
    }

    .bg-line:nth-child(2) {
        width: 120px;
    }

    .bg-line:nth-child(3) {
        width: 95px;
    }

    .bg-line {
        height: 6px;
        margin-bottom: 8px;
    }

    .bg-lines {
        top: 38px;
        left: 14px;
    }

    .wave-box {
        height: 40px;
    }

    .solution-showcase-row {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .solution-row-reverse {
        flex-direction: column;
    }

    .solution-showcase-image {
        order: 1;
        justify-content: center;
    }

    .solution-showcase-content {
        order: 2;
        max-width: 100%;
    }

    .solution-showcase-image > img {
        max-width: 260px;
    }

    .solution-phone-stack {
        min-height: 280px;
    }

    .solution-showcase-title {
        font-size: 20px;
        margin-bottom: 8px;
        margin-top: 0;
        line-height: 1.2;
    }

    .solution-showcase-description {
        font-size: 12px;
        line-height: 1.4;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .solution-showcase-list-title {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .solution-showcase-list {
        margin-bottom: 18px;
    }

    .solution-showcase-list li {
        font-size: 11px;
        gap: 6px;
        padding: 4px 0 4px 6px;
    }

    .solution-showcase-list li::after,
    .solution-showcase-list li:first-child::before {
        width: 92%;
    }

    .solution-showcase-list li img {
        width: 14px;
        height: 14px;
    }

    .phone-top {
        top: 18px;
    }

    .phone-bottom {
        top: 80px;
    }

    /* Smaller animation distance for tiny screens */
    .solution-phone-stack.animate .phone-bottom {
        animation: bottomFallSmall 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .solution-phone-stack.animate .phone-top {
        animation: topFallSmall 4.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: 0.35s;
    }

    @keyframes bottomFallSmall {
        0% {
            opacity: 0;
            transform: translate(-52%, -140px) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: translate(-52%, 0) rotate(0deg);
        }
    }

    @keyframes topFallSmall {
        0% {
            opacity: 0;
            transform: translate(-52%, -180px) rotate(0deg);
        }
        100% {
            opacity: 1;
            transform: translate(-52%, 0) rotate(0deg);
        }
    }
    .usecase-solutions-section {
        padding: 40px 10px 0px;
    }

    .usecase-solutions-container {
        max-width: 100%;
        gap: 18px;
    }

    .usecase-solutions-header {
        margin-bottom: 4px;
    }

    .usecase-solutions-heading,
    .usecase-solutions-heading span {
        font-size: 20px;
        margin-bottom: 8px;
        line-height: 1.2;
    }

    .usecase-solutions-subheading {
        max-width: 100%;
        font-size: 12px;
        line-height: 1.45;
        padding: 0 4px;
    }

    .ide-mockup-container,
    .qe-dashboard-wrap,
    .industry-ai-wrap,
    .ai-cost-dashboard {
        max-width: 100%;
        min-height: 280px;
    }

    .solution-phone-stack {
        max-width: 100%;
        min-height: 230px;
    }


    .usecase-solutions-section .hero-industries-buttons .btn {
        min-width: 100%;
        width: 100%;
        height: 40px;
        padding: 0 12px;
        gap: 6px;
        font-size: 12px;
        border-radius: 0px;
    }

    .solutions-services-section {
        /*       height: auto;
               min-height: 460px;*/
        height: 100vh; /*height: 400px;*/
        min-height: 400px;
        padding: 0px 0;
    }

    .solutions-services-container {
        padding: 0 12px;
    }

    .solutions-services-heading {
        font-size: 19px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .solutions-services-heading span {
        font-size: 19px;
    }

    .solutions-services-subheading {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .solutions-services-description {
        font-size: 12px;
        line-height: 1.7;
        margin-bottom: 22px;
        text-align: justify;
    }

    .solutions-services-section .hero-industries-buttons {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .solutions-services-section .hero-industries-buttons .btn {
        width: 100%;
        max-width: 260px;
        height: 42px;
        font-size: 11px;
    }

    .ai-services-section {
        padding: 40px 10px 0px;
    }

    .ai-services-heading {
        font-size: 19px;
        margin-bottom: 12px;
    }

    .ai-services-heading span {
        font-size: 19px;
    }

    .ai-services-subheading {
        font-size: 12px;
        line-height: 1.6;
    }

    .ai-services-header {
        margin-bottom: 16px;
    }

    .ai-services-grid {
        grid-template-columns: 1fr;
    }

    .ai-service-card,
    .ai-service-cta-card {
        padding: 20px 14px;
    }

    .ai-service-title {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .ai-service-description {
        font-size: 12px;
        margin-bottom: 16px;
        text-align: justify;
    }

    .ai-service-tags {
        gap: 6px;
        margin-bottom: 18px;
    }

    .ai-service-tags span {
        font-size: 9.5px;
        padding: 5px 9px;
    }

    .ai-service-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .ai-service-btn-primary,
    .ai-service-btn-secondary,
    .ai-services-main-btn {
        width: 100%;
        height: 40px;
        font-size: 11px;
        padding: 0 10px;
    }

    .engagement-models-section {
        padding: 35px 10px 45px;
    }

    .engagement-models-container {
        max-width: 100%;
    }

    .engagement-models-header {
        margin-bottom: 15px;
    }

    .engagement-models-title {
        font-size: 22px;
        margin-bottom: 8px;
        line-height: 1.25;
    }

    .engagement-models-subtitle {
        font-size: 11.5px;
        line-height: 1.55;
        padding: 0 2px;
        max-width: 224px;
        text-align: justify;
    }

    .engagement-models-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .engagement-column {
        gap: 10px;
    }

    .engagement-card-large {
        grid-column: 1 / -1;
        min-height: 380px;
        height: auto;
        padding: 24px 16px 18px 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        justify-content: flex-end;
    }

    /*         .hero-industries-buttons {
                padding-bottom: 10px;
             }*/
    .engagement-large-info {
        flex: none;
        align-self: stretch;
    }

    .engagement-large-hover {
        flex: none;
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 16px;
        opacity: 0;
        transform: translateY(40px);
        transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .engagement-card-large:hover .engagement-large-info {
        /*         transform: translateY(-155px);*/
        transform: translateY(-227px);
    }

    .engagement-card-large:hover .engagement-large-hover {
        opacity: 1;
        transform: translateY(0);
    }

    .engagement-card-large h3 {
        font-size: 16px;
    }

    .engagement-card-icon {
        width: 50px;
        margin-bottom: 6px;
    }

    .engagement-large-hover li {
        font-size: 10.5px;
        margin-bottom: 3px;
    }

    .engagement-large-hover ul {
        margin-bottom: 10px;
        padding-left: 16px;
    }

    .engagement-card,
    .engagement-card-image {
        height: 230px;
    }

    .engagement-card-text {
        left: 12px;
        bottom: 12px;
    }

    .engagement-card-text h3 {
        font-size: 15px;
        transform: translateY(-11px);
    }

    .engagement-hover-panel {
        /*         padding: 55px 12px 12px;*/
        padding: 49px 12px 12px;
    }

    .engagement-hover-panel ul {
        /*         padding-left: 16px;
                 margin-bottom: 14px;*/
        padding-left: 16px;
        margin-bottom: 9px;
    }

    .engagement-hover-panel li {
        font-size: 10px;
    }

    .engagement-card:hover .engagement-card-text {
        /*transform: translateY(-95px);*/
        transform: translateY(-150px);
    }

    .engagement-divider {
        width: 32px;
        margin-bottom: 10px;
    }

    .solutions-services-page .engagement-large-btn .btn.primary {
        min-width: 140px;
        padding: 9px 14px;
        font-size: 0.74rem;
    }

    .solutions-services-page .engagement-small-btn .btn.primary {
        padding: 7px 12px;
        font-size: 0.74rem;
    }

    .solutions-services-page .hero-industries-buttons .btn-text {
        font-size: 11px;
        letter-spacing: 0.1px;
    }

}

@media (min-width: 1270px) and (max-width: 1300px) {

    .solutions-services-page .stats-bar {
        margin-top: 0 !important;
    }

}

.solutions-services-page .solutions-services-section .hero-industries-buttons .btn.primary {
    color: #000;
    border: none;
    border-radius: 0;
    justify-content: center;
    transition: all 0.4s ease;
}

.solutions-services-page .solutions-services-section .hero-industries-buttons .btn.primary:hover {
    color: #fff;
}

/* 491px → 500px */
@media (min-width: 1251px) and (min-height: 491px) and (max-height: 500px) {

    .solutions-services-section {
        height: 100vh; /* height: 461px;*/
        min-height: 461px;
    }

}

/* 501px → 534px */
@media (min-width: 1251px) and (min-height: 501px) and (max-height: 534px) {

    .solutions-services-section {
        height: 100vh; /* height: 480px;*/
        min-height: 480px;
    }

}

/* 535px → 601px */
@media (min-width: 1251px) and (min-height: 535px) and (max-height: 601px) {

    .solutions-services-section {
        height: 100vh; /*      height: 500px;*/
        min-height: 552px;
        /* margin-top: 3px; */
    }

}

/* 602px → 641px */
@media (min-width: 1251px) and (min-height: 602px) and (max-height: 641px) {

    .solutions-services-section {
        height: 100vh; /* height: 525px;*/
        min-height: 525px;
    }

}

/* 642px → 741px */
@media (min-width: 1251px) and (min-height: 642px) and (max-height: 741px) {

    .solutions-services-section {
        height: 100vh; /*height: 553px;*/
        min-height: 553px;
    }

}

/* 742px+ */
@media (min-width: 1251px) and (min-height: 742px) {

    .solutions-services-section {
        height: 100vh; /*height: 662px;*/
        min-height: 553px;
    }

}

.solutions-services-page .engagement-small-btn .btn.primary {
    padding: 8px 15px;
    background: white;
    color: #000000;
}

.solutions-services-page .engagement-large-btn .btn.primary {
    background: white;
    color: #000000;
    min-width: 230px;
    padding: 13px 25px;
    font-size: 1rem;
}

@media (max-width: 991px) {
    .solutions-services-section {
        margin-top: 90px;
    }

}

.solutions-services-page .stats-bar {
    background: #FAFAFA;
}

.solutions-services-page .stat-number {
    color: #000;
}

.solutions-services-page .stat-text {
    color: #000;
}

@media (max-width: 768px) {
    .solutions-services-section {
        margin-top: 0px;
    }

    .solutions-services-section {
        /* height: auto; */
        min-height: 100vh;
        padding: 65px 0;
    }
}

@media (min-width: 991px) {
    .solutions-services-container {

        margin-top: 26px;
    }
}

/*.qe-dashboard-shell {
  width: 100%;
  aspect-ratio: 512 / 435;
  padding: 30px 42px;
}

.qe-dashboard-panel {
  width: 428px;
  height: 375px;
}

.qe-score-card {
  position: absolute;
  top: 38.6%;     *//* 168 / 435 *//*
  right: 1.95%;   *//* 10 / 512 *//*
  width: 37.5%;   *//* 192 / 512 *//*
  height: 60%;    *//* 261 / 435 *//*
}*/
/*@media (min-width: 500px) and (max-width: 526px){

    .qe-dashboard-panel {

        max-width: 382px;
    }
}
@media (min-width: 520px) and (max-width: 576px){

    .qe-dashboard-panel {
        max-width: 362px;

    }
}*/
/* < 576px — phones */
@media (max-width: 575.98px) {
    .solution-showcase-row.row-3,
    .solution-showcase-row.row-4,
    .solution-showcase-row.row-5 {
        margin-top: 24px;
    }
}

/* 576px – 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .solution-showcase-row.row-3,
    .solution-showcase-row.row-4,
    .solution-showcase-row.row-5 {
        margin-top: 28px;
    }
}

/* 768px – 991.98px — tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
    .solution-showcase-row.row-3,
    .solution-showcase-row.row-4,
    .solution-showcase-row.row-5 {
        margin-top: 80px;
    }
}

/* 992px – 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .solution-showcase-row.row-3,
    .solution-showcase-row.row-4,
    .solution-showcase-row.row-5 {
        margin-top: 80px;
    }
}

/* 1200px – 1399.98px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .solution-showcase-row.row-3,
    .solution-showcase-row.row-4,
    .solution-showcase-row.row-5 {
        margin-top: 45px;
    }
}

/* 1400px – 1529.98px */
@media (min-width: 1400px) and (max-width: 1529.98px) {
    .solution-showcase-row.row-3,
    .solution-showcase-row.row-4,
    .solution-showcase-row.row-5 {
        margin-top: 50px;
    }
}

/* ≥ 1530px — your existing rule */
@media (min-width: 1530px) {
    .solution-showcase-row.row-3,
    .solution-showcase-row.row-4,
    .solution-showcase-row.row-5 {
        margin-top: 60px;
    }
}