@media only screen and (max-width: 766px) {
    nav {
        display: none;
    }

    .logo-wrapper a {
        max-width: 120px;
    }

    .logo-icon {
        max-width: 27px;
    }

    .container {
        padding: 0px 20px;
    }

    .discount-bar p {
        font-size: 12px;
        line-height: normal;
        margin: auto;
        text-align: center;
    }

    .discount-bar img {
        display: none;
    }

    .discount-bar {
        align-items: center;
        display: flex;
    }

    .banner {
        padding-top: 8rem;
    }

    h1 {
        font-size: 9vw;
        line-height: 52px;
        letter-spacing: -3px;
    }

    .flex-row {
        flex-wrap: wrap;
    }

    h1 br {
        display: none;
    }

    .height-container {
        height: 54px;
    }

    .button-wrapper {
        flex-direction: row;
        gap: 20px;
    }

    /* marquee replaces scrollable logo strip */
    .slider-wrapper-companies {
        display: none;
    }

    .box-wrapper-services {
        min-height: auto;
    }

    .video-reff {
        height: auto;
    }

    img.websvg {
        height: 220px;
    }

    img.dashbaord-sass {
        height: 220px;
    }

    img.mobielsvg {
        height: 300px;
    }

    .heading-wrapper h2 {
        font-size: 8vw;
        line-height: 9vw;
        letter-spacing: -0.4vw;
    }

    .olx {
        padding: 3rem 0px;
    }

    .box-wrapper-olx {grid-row-gap: 2rem;}

    .content-wrapper-bottom h4 {
        font-size: 13vw;
        /* white-space: nowrap; */
    }

    .content-wrapper-bottom p {
        font-size: 3.9vw;
    }

    .heading-wrapper:has(a) a {
        display: none;
    }

    .heading-wrapper h2 br {
        display: none;
    }

    .content-portfolio-outer h3 {
        font-size: 5vw;
    }

    .content-portfolio-outer p {
        font-size: 3.5vw;
    }

    .turn-your-idea {
        padding-bottom: 4rem;
    }

    .we-deliver.black-section {
        padding: 4rem 0px;
    }

    .row.features-row {
        flex-direction: column;
        margin: 20px 0;
    }

    .key-features li {
        font-size: 1rem;
    }

    .key-features li span {
        font-size: 0.75rem;
    }

    .sticky-item .container {
        padding: 2.5rem 20px;
    }

    .left-of-services h2 {
        font-size: 9vw;
        margin: 0;
    }

    .left-of-services {
        flex-wrap: wrap;
    }

    .left-of-services p {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.5;
        display: none;
    }

    .right-of-services {}

    .container-services {
        flex-direction: column;
    }

    .left-of-services ul {
        max-width: 100%;
        margin: 3rem 0px;
    }

    .container-button-in-services a {
        font-size: 3.5vw;
    }

    div#uiuxdesign img {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    div#uiuxdesign {
        max-width: 100%;
    }

    .testimonials .container {
        padding-left: 20px;
    }

    .testimonials {
        padding: 4rem 0px;
    }

    .box-whole-rating {
        min-width: 40%;
    }

    .box-testimonial-slider {
        min-width: 80%;
        height: 17rem;
        padding: 1rem;
    }

    .rating-stars h5 {
        font-size: 2rem;
    }

    .box-rating span {
        font-size: 0.75rem;
    }

    .box-testimonial-slider p {
        font-size: 0.75rem;
        margin: 2rem 0px;
    }

    span.company-name {
        font-size: 0.63rem;
    }

    .from-where-origin {
        padding: 4rem 0px;
    }

    .stickey-note-by-devroaks {
        display: none;
    }

    button.btn.btn-link {
        text-align: left;
        font-size: 4vw;
        letter-spacing: normal;
    }

    .card-body, .has-project li, .logo-wrapper p {
        font-size: 3.5vw;
    }

    .has-project {
        padding: 4rem 0px;
    }

    .has-project .heading-wrapper h2 {
        font-size: 2rem;
    }

    .has-project li {
    }

    .has-project li::before {
        width: 15px;
        height: 15px;
    }

    .has-project li::after {
        top: 5px;
        left: 6px;
        width: 3px;
        height: 7px;
    }

    .box-wrapper-form {
        padding: 2rem 1rem;
        margin: 2rem 0px;
        height: auto;
        min-height: auto;
    }

    .buttonw-rapper {
        flex-direction: column;
        margin: auto;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
    }

    .prefferd-email span {
        font-size: 0.75rem;
    }

    .prefferd-email a {
        font-size: 1rem;
    }

    .call-with-ceo .ceo-names h5 {
        font-size: 1rem;
    }

    .call-with-ceo .ceo-names h5 span {
        font-size: 0.75rem;
    }

    footer {
        padding: 4rem 0px 2rem;
    }

    footer .logo-wrapper {
        max-width: 400px;
    }

    footer .logo-wrapper>a:first-of-type {
        max-width: 230px;
    }

    .logo-wrapper p {
        font-size: 4vw;
    }

    div#menu-columns {
        max-width: 100%;
    }

    footer h4 {
        font-size: 1rem;
        fon\: ;
    }

    footer ul li a {
        font-size: 0.95rem;
    }

    footer .social-media ul {
        flex-wrap: wrap;
        flex-direction: column;
    }

    .social-media {
        flex-direction: row;
        gap: 20px;
        justify-content: flex-start;
        align-items: flex-end;
        margin: 0;
        padding: 4rem 0px 2rem;
    }

    .lets-wrok-together h4 {
        font-size: 0.75rem;
    }

    .lets-wrok-together p {
        font-size: 1.26rem;
        letter-spacing: normal;
    }

    .coprights .container {flex-direction: column-reverse;gap: 40px;}

    .basedin {
        flex-wrap: wrap;
        gap: 10px;
        display: none;
    }

    .basedin>p {
        font-size: 0.75rem;
        text-align: center;
    }
    .right-header {
        display: none;
    }

    .hamburger {
        display: flex;
        margin-left: auto;
    }

    .banner-content-case-detail {
        padding-top: 7rem;
    }

    .align_left_to_right_imgs img, .align_right_to_left_imgs img {
        height: 120px;
    }

    div#service-u-need h5 {
        font-size: 4vw;
        /* margin: 0; */
        margin: 0;
    }

    .box-wrapper-try {
        padding: 2rem;
    }

    .try-me {
        padding: 2rem 0px;
    }

    .box-wrapper-try h2 {
        font-size: 2rem;
    }

    .box-wrapper-try li {
        font-size: 0.75rem;
    }
    div#menu-columns .row {
        flex-direction: row;
        display: flex;
        gap: 0;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    div#menu3 {
        margin: 3rem 0px 0px;
    }

    span.circle-wrapper-ok {
        scale: 0.6;
    }

    .lets-wrok-together {
        padding-right: 70px;
        margin-left: auto;
    }

    .basedin {}

    .coprights {
        padding: 2rem 0px 0px;
    }

    div#menu1 {
        max-width: 40vw;
    }

    div#menu11 {
        max-width: 40vw;
    }

    footer .logo-wrapper a {
        width: 100%;
        max-width: max-content;
    }

    .content-wrapper-right-banner>p {
        font-size: 3.8vw;
    }

    .image-wrapper-portfolio:has(video) {
        height: auto;
    }

    .left-of-services li {
        font-size: 3.8vw;
    }

    .trusted-clients h2 {
        font-size: 5vw;
    }

    span.line-wrapper {
        font-size: 4vw;
        padding-left: 8vw;
    }

    .box-wrapper-services h2 {
        font-size: 8vw;
    }

    span.line-wrapper::after {
        width: 6vw;
    }

    .olx .row {
        flex-wrap: nowrap;
        overflow: auto;
    }

    .olx .row .col-md-4, .olx .row .col-md-6 {
        width: 70vw;
        max-width: 70vw;
        min-width: 75vw;
    }

    .olx .container {
        padding-right: 0;
    }

    .olx .heading-wrapper h2 {
        padding-right: 20px;
    }

    .olx .row .col-md-6:last-of-type h4 {
        font-size: 10vw;
    }

    .has-project .mb-3 {
        font-size: 5vw;
    }

    .service-options label {
        font-size: 3.5vw;
    }
    .slider-content-wrapper strong {
        font-size: 5vw;
    }

    .slider-content-wrapper p {
        font-size: 3.5vw;
    }

    .slider-content-wrapper .button-wrapper {
        max-width: max-content;
    }
    .row-services .container {
        flex-direction: column-reverse;
        display: flex;
        gap: 0;
    }

    .content-right-image {
        max-width: 50vw;
    }

    .content-left-banner p:first-of-type {
        max-width: 100%;
        font-size: 3.9vw;
        line-height: 6vw;
        font-weight: 500;
        margin: 20px 0px;
    }

    p.italic {
        font-size: 3.5vw;
        margin: 0;
    }

    .why-us img {
        max-height: 300px;
        object-fit: cover;
    }

    .why-us-content h2 {
        font-size: 9vw;
    }

    .why-us-content {
        margin: 3rem 0px;
    }

    .why-us-content>p {font-size: 3.5vw;font-weight: 500;line-height: 6vw;}

    .why-us-content #accordion button {
        font-size: 3.9vw;
    }

    .why-us {
        padding-bottom: 0rem;
    }

    .service-you-need {
        padding: 2rem 0px;
    }

    .technologies-we-work-on {
        padding: 2rem 0px;
    }

    .tabs-container-for-techs > .row:first-child {
        display: none;
    }

    div#code-smaple-row {
        row-gap: 50px;
    }

    .card-wrapper-new {
        overflow: auto;
        flex-wrap: nowrap;
        /* grid-column-gap: 0; */
    }

    .box-card {
        min-width: 75vw;
    }

    div#services-process .card-wrapper-new {
        justify-content: flex-start;
    }

    .content-card-wrapper li {
        font-size: 3.5vw;
        font-weight: 400;
        line-height: 5vw;
    }

    .content-card-wrapper p {
        font-size: 3.9vw;
        line-height: 6vw;
        font-weight: 500;
    }

    .content-card-wrapper h4 {
        font-size: 7vw;
    }

    span.span-number {
        margin-bottom: 2rem;
    }

    .the-process {
        padding: 2rem 0px;
    }
    .about-page {
        padding-top: 8rem;
    }

    .banner-about h1 {
        font-size: 9vw;
    }

    .banner-about p {
        font-size: 4.5vw;
    }

    .why-us-content h2 br {
        display: none;
    }

    div#about-founder .row {
        flex-direction: column;
        gap: 20px;
        padding-bottom: 2rem;
    }

    .about-mozinomer {
        padding: 2rem 0px;
    }

    .about-me-content p {
        font-size: 5vw;
    }

    .boxes {
        padding-top: 2rem;
    }

    .boxes .box-wrapper-olx p br {
        display: none;
    }
    .heading-blog-wrapper p:first-of-type a {
        font-size: 3.5vw;
    }

    .heading-blog-wrapper p:first-of-type {
        flex-wrap: wrap;
        gap: 4px  10px;
        margin: 20px 0px 0px;
    }

    .heading-blog-wrapper h2 {
        font-size: 9vw;
        line-height: 11vw;
        letter-spacing: -0.5vw;
    }

    .row.align-center.main-blog .col-md {
        padding: 0;
    }
    .table-of-content {
        display: none;
    }

    .main-area-blogs {
        width: 100%;
        max-width: 100%;
    }

    .container-row {
        flex-wrap: wrap;
        display: flex;
    }

    .content-main-blog h2 {
        font-size: 9vw;
        line-height: 11vw;
        letter-spacing: -0.5vw;
    }

    .main-area-blogs p {
        font-size: 3.5vw;
    }

    .content-main-blog h2 br {
        display: none;
    }
}


/* === Service Cards — Responsive Revamp === */
@media only screen and (max-width: 766px) {
    .video-reff .row {
        grid-template-columns: 1fr 1fr;
    }

    .video-reff .col-md:not(:last-child) .box-wrapper-services::after {
        display: none;
    }

    .box-wrapper-services {
        min-height: 320px;
    }

    .service-header {
        padding: 28px 24px 0;
        gap: 12px;
    }

    a.service-title-link {
        padding: 18px 24px 20px;
    }

    .box-wrapper-services h2 {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }

    img.mobielsvg,
    img.ai-app {
        height: 220px;
        margin-bottom: -30px;
    }

    img.dashbaord-sass,
    img.websvg {
        height: 180px;
        width: calc(100% - 24px);
        margin-left: 24px;
    }

    .service-arrow-wrap {
        width: 34px;
        height: 34px;
    }
}

@media only screen and (max-width: 480px) {
    .video-reff .row {
        grid-template-columns: 1fr;
    }
}

/* === Portfolio Grid - Responsive === */
@media only screen and (max-width: 766px) {
    .portfolio-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding-bottom: 32px;
        margin-bottom: 36px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .portfolio-section-header h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
}

/* === Blog Section - Responsive === */
@media only screen and (max-width: 766px) {
    .from-where-origin {
        padding: 72px 0 90px;
    }

    .blog-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding-bottom: 28px;
        margin-bottom: 36px;
    }

    .blog-section-header h2 {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    .blog-card-body {
        padding: 18px 18px 20px;
    }
}

/* =============================================
   HERO SECTION — MOBILE FIX
   ============================================= */
@media only screen and (max-width: 766px) {
    .container-left-banner {
        width: 100%;
        order: 1;
    }

    .container-right-banner {
        width: 100%;
        max-width: 100%;
        order: 2;
        margin-top: 32px;
        margin-bottom: 0;
    }

    .content-wrapper-right-banner {
        max-width: 100%;
    }

    .content-wrapper-right-banner > p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 24px;
        max-width: 100%;
    }

    .testimoinal-founder ul {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
        align-items: center;
    }

    .testimoinal-founder li {
        margin-left: -12px;
    }

    .loved-by-clients {
        margin-left: 12px;
    }

    .loved-by-clients p {
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .flex-row {
        gap: 0;
    }

    .heading-wrapper-banner {
        width: 100%;
    }

    .height-container {
        height: 48px;
    }

    .button-wrapper {
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
        margin-top: 28px;
    }

    .button-wrapper a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* =============================================
   THE-PROCESS (REVIEWS) — MOBILE LAYOUT
   (GSAP is disabled on mobile, cards scroll natively)
   ============================================= */
@media only screen and (max-width: 767px) {
    .the-process {
        padding: 3rem 0;
        overflow: hidden;
    }

    .card-wrapper-new {
        overflow-x: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 16px;
        gap: 16px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .card-wrapper-new::-webkit-scrollbar {
        height: 3px;
    }

    .card-wrapper-new::-webkit-scrollbar-track {
        background: #f0f0f0;
    }

    .card-wrapper-new::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }

    .box-card {
        min-width: 78vw;
        max-width: 78vw;
        min-height: auto;
        scroll-snap-align: start;
    }
}

/* =============================================
   MARQUEE — MOBILE ADJUSTMENTS
   ============================================= */
@media only screen and (max-width: 766px) {
    .marquee-item {
        padding: 0 28px;
    }

    .marquee-item img {
        height: 24px;
        max-width: 110px;
    }

    .trusted-clients h2 {
        margin-bottom: 0;
    }
}