/* ============================================
   RESPONSIVE DESIGN SYSTEM
   ============================================ */

/* Desktop Large (1200px and above) - Default values from variables.css */

@media only screen and (min-width: 992px) and (max-width: 1280px) {
    .banner-sec {
        padding-top: 18vw;
    }

    .inner-service {
        background-color: #EAF3F0;
        padding-top: 0;
        aspect-ratio: unset;
    }
}

/* ============================================
   Tablet Landscape (992px - 1199px)
   ============================================ */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    :root {
        /* Adjust font sizes slightly */
        --font-size-60: 52px;
        --font-size-52: 48px;
        --font-size-48: 42px;
        --font-size-42: 36px;
        --font-size-36: 32px;

        /* Adjust spacing */
        --spacing-120: 96px;
        --spacing-96: 80px;
        --spacing-80: 64px;
        --spacing-72: 60px;
        --spacing-60: 52px;
    }

    section.process {
        padding: var(--spacing-5xl) 0;

    }

}

/* ============================================
   Tablet Portrait (768px - 991px)
   ============================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    :root {
        /* Scale down font sizes for tablets */
        --font-size-60: 48px;
        --font-size-52: 42px;
        --font-size-48: 36px;
        --font-size-42: 32px;
        --font-size-36: 28px;
        --font-size-32: 26px;
        --font-size-28: 24px;
        --font-size-24: 20px;
        --font-size-20: 18px;

        /* Adjust spacing for tablets */
        --spacing-120: 80px;
        --spacing-96: 64px;
        --spacing-80: 56px;
        --spacing-72: 52px;
        --spacing-60: 48px;
        --spacing-52: 44px;
        --spacing-48: 40px;
        --spacing-40: 32px;
        --spacing-36: 28px;
    }
}

/* ============================================
   Mobile Large (576px - 767px)
   ============================================ */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    :root {
        /* Mobile-optimized font sizes */
        --font-size-60: 42px;
        --font-size-52: 36px;
        --font-size-48: 32px;
        --font-size-42: 28px;
        --font-size-36: 24px;
        --font-size-32: 22px;
        --font-size-28: 20px;
        --font-size-24: 18px;
        --font-size-20: 16px;
        --font-size-18: 16px;

        /* Mobile spacing adjustments */
        --spacing-120: 64px;
        --spacing-96: 52px;
        --spacing-80: 48px;
        --spacing-72: 44px;
        --spacing-60: 40px;
        --spacing-52: 36px;
        --spacing-48: 32px;
        --spacing-40: 28px;
        --spacing-36: 24px;
        --spacing-32: 24px;
    }

    .idea-video {
        display: none;
    }
}

/* ============================================
   Mobile Small (up to 575px)
   ============================================ */
@media only screen and (max-width: 575px) {
    :root {
        /* Small mobile font sizes */
        --font-size-60: 36px;
        --font-size-52: 32px;
        --font-size-48: 28px;
        --font-size-42: 26px;
        --font-size-36: 22px;
        --font-size-32: 20px;
        --font-size-28: 18px;
        --font-size-24: 18px;
        --font-size-20: 16px;
        --font-size-18: 14px;

        /* Compact spacing for small screens */
        --spacing-120: 52px;
        --spacing-96: 48px;
        --spacing-80: 40px;
        --spacing-72: 36px;
        --spacing-64: 34px;
        --spacing-60: 32px;
        --spacing-52: 28px;
        --spacing-48: 24px;
        --spacing-40: 24px;
        --spacing-36: 20px;
        --spacing-32: 20px;
        --spacing-28: 16px;
        --spacing-24: 16px;
    }
}

/* ============================================
   LEGACY BREAKPOINTS (Existing Styles)
   ============================================ */

@media only screen and (min-width: 100px) and (max-width: 1799px) {
    .ind-card p {
        top: 80px;
    }

    .zigzag.separate::before {
        right: 44.2%;
    }
}



@media only screen and (min-width: 100px) and (max-width: 1600px) {}

@media only screen and (min-width: 100px) and (max-width: 1599px) {
    .ind-card p {
        top: 60px;
    }

    .zigzag.separate::before {
        right: 43%;
    }
}

@media only screen and (min-width: 100px) and (max-width: 1499px) {

    .zigzag.separate.bg .icon img,
    .zigzag.separate.bg .icon {
        aspect-ratio: 625 / 445;
    }

    .zigzag.separate .container,
    .project .container {
        max-width: calc(50vw + (1163px / 2));
        margin-right: 0;
        /* max-width: 100%; */
        left: auto;
        right: 0;

    }

    .zigzag.separate .left {
        width: calc(1170px * 0.5833333333);
    }

    .zigzag.separate .icon {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .zigzag.separate .right {
        width: calc((1170px * 0.4166666667) - 1.5rem);
        flex: 1 1 auto;
    }
}

@media only screen and (min-width: 100px) and (max-width: 1366px) {
    .zigzag.separate::before {
        right: 42.7%;
    }

    .zigzag.separate.bg .icon img,
    .zigzag.separate.bg .icon {
        aspect-ratio: 625 / 485;
    }

}

@media only screen and (min-width: 100px) and (max-width: 1299px) {

    .zigzag.separate.bg .icon img,
    .zigzag.separate.bg .icon {
        aspect-ratio: 625 / 565;
    }

    .awards-btn-wrap>* {
        position: unset;
        transform: unset;
    }

    .awards-btn-wrap {
        display: flex;
        gap: 15px;
        flex-direction: row-reverse;
        justify-content: flex-end;
        padding-top: var(--spacing-3xl);
        transform: unset;
    }

    .colab-content {
        text-align: center;
    }

    .zigzag.separate::before {
        right: 42%;
    }
}

@media only screen and (min-width: 100px) and (max-width: 1199px) {
    .banner-service {
        padding-top: calc(var(--spacing-120) + 50px);
        padding-bottom: 0;
    }

    .build-header {
        display: none;
    }

    .build-wrap {
        padding: 0;
        border: unset;
    }

    .banner-sec.inner-service {
        padding: 0;
        aspect-ratio: 1453/946;
    }

    .service-bottom::after {
        /* background-color: transparent; */
        height: 28px;
    }

    .footer-contact-item {
        padding-left: 0;
    }

    .design-tab .nav-link {
        height: 100%;
        /* margin: 0 14px; */
    }

    .header .navbar {
        border-top: unset;
    }

    .footer-contact-item::before {
        display: none;
    }

    .banner-sec {
        aspect-ratio: 1453/1076;
        padding-top: 15vw;
    }

    .colab-content::before {
        right: -25px;
    }

    .colab-content::after {
        right: 80px;
    }

    .colab-slider-outer::after {
        left: -20px;
        width: 133%;
    }

    .ideas-section-inner {
        aspect-ratio: unset;
        background-position: left;
        border-radius: 20px;
    }

    .zigzag.separate .left {
        width: 100%;
    }

    .zigzag.separate .content {
        max-width: 100%;
        max-block-size: 1;
        margin-top: 30px;
    }

    .zigzag.separate::before {
        right: 0;
        top: 0;
    }

    .zigzag.separate {
        padding-bottom: var(--spacing-5xl);
    }

    .core-card {
        width: 100%;
        height: auto;
    }

    .vision-outer .row>*:nth-child(even) {
        transform: unset;
    }

    .vision2-card .title {
        flex-direction: column-reverse;
        align-items: start;
        gap: 15px;
    }

    .idea-video::before {
        background-color: #000000bf;
    }

    #projectModal .brand-content {
        display: none;
    }

    #projectModal .col-md-5 {
        position: unset !important;
        padding: 0 !important;
    }

    #projectModal .col-md-7 {
        padding: 30px 15px 15px !important;
    }

    #projectModal .contact-form textarea.form-control {
        height: 120px !important;

    }

}

@media only screen and (min-width: 100px) and (max-width: 1099px) {
    .build-nav {
        display: flex;
        gap: 15px;
    }

    .build-nav .nav-link {
        aspect-ratio: unset;
        width: 100%;
    }

    .build-nav li {
        flex: 1 0 240px;
    }

    .build-right {
        text-align: center;
        margin-bottom: 30px;
    }

    .build-nav {
        margin-top: 0px;
        margin-bottom: 30px !important;
    }

    .cap-flex {
        flex-direction: column;
        overflow: hidden;
        align-items: flex-start !important;
    }

    .cap-nav {
        flex-wrap: wrap;
        width: 100%;
        /* overflow: hidden; */
        /* flex: 1 1 100%; */
        align-items: center;
        /* justify-content: center; */
        /* height: auto; */
        flex-direction: row !important;
        gap: 15px;
        row-gap: 15px !important;
        flex: 1 1 100%;
    }

    .cap-nav .nav-link {
        flex: 1 1 32%;
    }

    .cap-content {
        flex: 0 0 100%;
        width: 100%;
    }

    .cap-wrap {
        justify-content: space-between;
    }

    .cap-wrap .icon img {
        left: 0;
    }

    .banner-sec {
        aspect-ratio: 1453 / 1196;
    }

    .draggable-control {
        width: 100%;
    }

    .process-slider {
        height: auto;
    }

    section.process .title-wrap {
        margin: 0;
    }

    .design-left {
        /* margin-bottom: 30px; */
        height: auto;
    }

    .process .shade-process {
        display: none;
    }
}

@media only screen and (min-width: 100px) and (max-width: 991px) {
    .process-outer {
        margin-top: 30px;
    }

    .faq-item .title {
        flex-direction: column;
        margin-bottom: 15px;
        gap: 15px;
        align-items: baseline;
    }

    .toc-wrapper {
        display: none;
    }

    .ceo .icon {
        margin: 50px auto 0;
    }

    .contact-section {
        padding: var(--spacing-60) 0;
    }

    .contact-section-inner {
        flex-direction: column;
        gap: var(--spacing-40);
    }

    .contact-right {
        flex: 1;
        width: 100%;
        max-width: 500px;
    }

    .contact-title {
        font-size: var(--font-size-42);
        text-align: center;
    }

    .contact-description {
        text-align: center;
    }

    .contact-icon {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .contact-left {
        text-align: center;
    }

    .header .navbar {
        padding: 0.75rem 0;
    }

    .header .logo {
        height: 42px;
    }

    .wrapper {
        padding-top: 70px;
    }

    .footer-top {
        padding: 50px 0;
    }

    .footer-title {
        font-size: 36px;
        text-align: center;
    }

    .footer-contact-item {
        justify-content: center;
    }

    .footer-main {
        padding: 50px 0;
    }

    .footer-heading {
        font-size: 20px;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 100px) and (max-width: 767px) {
    .scale-outer {
        overflow-x: auto;
        padding-right: 15px !important;

    }

    .scale-outer .row {
        flex-wrap: nowrap;
    }

    .scale-outer .col-lg-5.col-12 {
        width: 80%;
    }

    .inner-banner ul {
        flex-wrap: wrap;
    }

    .wpcf7-form input[type="submit"],
    .wpcf7-form button[type="submit"],
    .wpcf7-submit {
        padding: 15px 30px;
    }


    .banner-inner {
        max-width: 100%;
    }

    .contact-section {
        padding: var(--spacing-48) 0;
    }

    .author-card {
        flex-direction: column;
    }


    .contact-icon {
        width: 80px;
        margin-bottom: var(--spacing-24);
    }

    .contact-title {
        font-size: var(--font-size-36);
    }

    .contact-description {
        font-size: var(--font-size-16);
    }

    .contact-form-wrapper {
        padding: 28px 20px;
    }

    .contact-form .form-row {
        flex-direction: column;
    }

    .contact-form .form-control {
        height: 45px;
        font-size: var(--font-size-14);
    }

    .contact-form .btn-submit {
        height: 50px;
        font-size: var(--font-size-16);
    }

    .footer-top {
        padding: 40px 0;
    }

    .footer-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .footer-main {
        padding: 40px 0;
    }

    .footer-heading {
        font-size: 18px;
        margin-bottom: 15px;
        text-align: center;
    }

    .footer-links {
        text-align: center;
    }

    .footer-links li {
        margin-bottom: 12px;
    }

    .footer-link {
        font-size: 14px;
    }

    .footer-copyright {
        text-align: center;
        margin-bottom: 0px;
    }

    .footer-social {
        justify-content: center;
    }

    h3.footer-heading.invisible {
        display: none;
    }

    .find-outer .title-wrap.mb-5 {
        margin-bottom: 30px !important;
    }
}

@media only screen and (min-width: 100px) and (max-width: 575px) {
    .faq-scroll {
    max-height: inherit;
}.perf-outer {
    margin-top: 90px;
}.build-right {
        margin-bottom: 15px;
    }.service-card {
    padding-right: 45px;
}.sb-wrap .title {
    font-size: var(--font-size-4xl);}
    .service-card .title h3,
    .steps-card h3,
    .article-card .content h3,
    .modal-card h3 {
        font-size: var(--font-size-32);
        
    }.service-card p {
    
    max-width: inherit;}
    .steps-card span {
        bottom: 10px;
        transform: translate(-50%, 0px);
    }.sb-wrap .wpcf7-form .wpcf7-form-control-wrap:has(input[type="checkbox"]) .wpcf7-list-item-label {
        line-height: var(--bs-body-line-height);
    }.wide-wrap {
    width: 50%;
}.features-v2 .features-outer .row .row>*:nth-child(1), .features-v2 .features-outer .row .row>*:nth-child(2) {
    margin-bottom: 0;
}
    .service-card .title h3 br, .modal-card h3 br {
        display: none;
    }
    
    .vision-card,
    .vision2-card {
        padding: 20px;
        padding-bottom: 20px;
    }

    .vision2-card .title h3 {
        font-size: var(--font-size-3xl);
    }

    .growth .col-lg-6.col-12.align-self-center {
        order: -1;
        margin: 0;
    }

    .footer-contact-item svg {
        width: 22px;
    }

    .staff-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-y: auto;
        padding-bottom: 10px;
        margin-bottom: 10px !important;
    }

    .staff-nav .nav-item {
        flex: 0 0 60%;
    }

    .staff-nav .nav-link {
        aspect-ratio: auto;
        gap: 15px;
    }

    .page-id-88 .features,
    .page-id-162 .features,
    .page-id-279 .staff {
        padding-top: var(--spacing-5xl);
    }

    .cap-wrap .content {
        text-align: center;
    }

    .faq-item:not(:last-child) {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .sb-wrap .form-row.submit-row {
        margin-bottom: 0;
    }

    .inner-banner .btn {
        margin-top: 15px;
    }

    .growth-services {
        padding-top: var(--spacing-5xl);
        padding-bottom: var(--spacing-5xl);
    }

    .build-right img,
    .zigzag.separate.bg .icon img,
    .zigzag.separate.bg .icon {
        width: 100%;
    }

    .zigzag.separate .row>*:has(.icon) {
        width: 100%;
    }

    .service-subbanner {
        padding: var(--spacing-5xl) 0;
        position: relative;
    }

    .service-subbanner::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #000000a8;
        z-index: 1;
    }

    .service-subbanner .container {
        position: relative;
        z-index: 1;
    }

    .build-nav li {
        flex: 1 0 45%;
    }

    .build-nav .nav-link {
        height: 100%;
    }

    .blog-card .title h2 {
        font-size: var(--font-size-32);
    }

    section.cap-sec {
        padding-top: var(--spacing-5xl);
    }

    .zigzag.separate .content {
        padding: 0;
        height: auto;
        display: block;
    }

    .blog-card .title .date,
    .blog-card p,
    .ceo p {
        font-size: var(--font-size-lg);
    }


    .cap-nav .nav-link {
        flex-direction: column;
        gap: 5px;
        align-items: start;
        padding: 10px;
        padding-left: 15px;
    }

    .cap-wrap {
        flex-direction: column;
        gap: 30px;
        padding: 30px 15px;
    }

    .cap-wrap .content {
        flex: 1 1 auto;
    }

    .perf-outer .col-12:not(:last-child) {
        margin-bottom: 90px;
    }

    .perf-card {
        background-color: #000;
    }

    .perf-card h3 {
        color: var(--primary-color);
    }

    .perf-card p {
        color: #fff;
    }

    .perf-card::before {
        color: #fff;
    }

    .core-tab {
        width: 100%;
        gap: 15px;
        border-radius: 35px;
    }

    .service-best .about-faq .accordion-button {
        padding-left: 0;
        padding-right: 0;
    }

    .service-best .about-faq .accordion-body {
        padding-left: 0;
        padding-right: 0;
    }

    .vission {
        padding-top: var(--spacing-5xl);
    }

    .vision2-card .title {
        margin-bottom: 15px;
    }

    .vision2-card .icon {
        margin-bottom: 10px;
    }

    .expert-flex {
        flex-direction: column;
        align-items: flex-start;
        flex-direction: column;
        overflow: hidden;
        align-items: flex-start !important;
        gap: 30px;
    }

    .expert-nav {
        flex-wrap: wrap;
        align-items: center;
        /* justify-content: center; */
        flex-direction: row !important;
        gap: 5px;
        row-gap: 5px !important;
        flex: 1 1 100%;
    }

    .expert-nav .nav-link {
        flex: 1 1 calc(50% - 7.5px);
        padding: 15px 10px;
        background-color: #eaeaea;
    }
.standout .expert-nav .nav-link {
    background-color: transparent;
}.standout .expert-wrap .icon img {
    max-width: 120px;
}
section.features {
    padding-bottom: var(--spacing-5xl);
    padding-top: var(--spacing-5xl);
}
    .expert-nav .nav-link.active {
        font-weight: 400;
    }

    .expert-wrap .content {
        padding: 0;
        margin-bottom: 30px;
    }

    .features-outer .icon img {
        width: 100%;
        height: auto;
    }

    .standout .expert-nav {
        flex: 1 1 100%;
    }

    .expert-wrap {
        padding: 30px 15px;
    }

    .standout .expert-nav {
        flex: 1 1 100%;
        align-items: stretch;
        justify-content: stretch;
    }

    .standout .main-image img {
        aspect-ratio: 700 / 366;
    }

    .zigzag.separate .row>*:has(.icon) {
        padding-left: 0;
    }

    .zigzag.separate .icon {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .zigzag.separate.bg::before {
        border-radius: unset;
    }

    img.icon-core {
        display: none;
    }

    .core-tab .nav-item {
        flex: 1 1 calc(50% - 7.5px);
    }

    .core-tab .nav-link {
        background-color: #e5e5e5;
        width: 100%;
    }

    .core-content {
        margin-top: 30px;
    }

    .banner-sec.inner-service {
        padding: 0;
        aspect-ratio: auto;
        gap: 30px;
    }

    .banner-sec {
        aspect-ratio: unset;
        padding-top: 30vw;
        gap: 50px;

    }

    .title-wrap {
        margin-bottom: var(--spacing-3xl);
    }

    .contact-form button.wpcf7-submit {
        max-width: fit-content;
        padding: 20px 40px;
    }

    .ideas-section-inner {
        padding: 35px 45px;
        padding: 30px 15px;
    }


    .cta {
        padding: 15px 30px;
    }

    .blog-tabs {
        justify-content: center;
    }

    .article-card::before,
    .article-card .image {
        opacity: 1;
    }

    .article-card .content h3,
    .article-card .details .date {
        color: #fff;
    }

    .article-card .details .read-more svg path {
        stroke: #fff;
    }

    .contact-section-inner {
        padding: 15px;
    }

    .ceo {
        padding: 30px 15px;
    }

    .footer-contact-item {
        gap: 5px;
    }

    .clients-card {
        flex-direction: column;
    }

    .clients-card .icon {
        flex: 1 1 100%;
        width: 100%;
    }

    .clients-card .icon img {
        width: 100%;
    }

    .draggable-wrap {
        display: none;
    }

    .ind-card p {
        opacity: 1;
    }

    .ind-card .icon::before {
        opacity: 1;
    }

    .ind-card .ind-shade {
        opacity: 1;
    }

    .ind-card {
        aspect-ratio: 325/420;
    }

    .success-card-wrap {
        flex-direction: column;
    }

    .design-tab {
        flex-direction: column;
    }

    .design-tab .nav-item:has(.active) {
        background: transparent;
    }

    .design-tab .nav-item {
        padding: 0;
        flex: 0 0 auto;
    }

    .design-tab {
        gap: 15px;
        margin-bottom: 15px;
        flex-direction: row;
        justify-content: center;
    }

    .design-content {
        border-radius: 20px;
    }

    .contact-right {
        max-width: 100%;
    }

    .contact-title {
        font-size: var(--font-size-32);
    }

    .colab-slider-outer {
        padding-left: 0;
        padding-top: 30px;
    }

    .contact-form-wrapper {
        padding: 24px 18px;
    }

    .mobile-sidebar {
        width: 280px;
    }

    .header .logo {
        height: auto;
    }

    .wrapper {
        padding-top: 60px;
    }

    .footer-top {
        padding: 30px 0;
    }

    .footer-title {
        font-size: 28px;
    }

    .contact-text {
        font-size: 16px;
    }

    .footer-main {
        padding: 30px 0;
    }

    .footer-bottom {
        padding: 20px 0;
    }

    .blog-share {
        flex-direction: row;
        margin-bottom: 30px;
    }

    .mobile-sidebar .btn>* {
        position: relative;
        z-index: 2;
    }

    .blog-share a {
        height: 42px;
        width: 42px;
        line-height: 42px;
        font-size: 16px;
    }

    .blog-share a svg {
        width: 20px;
        height: auto;
    }

    .service-bottom img {
        max-width: 110px;
    }

    .service-bottom .image::before {
        width: 130px;
        height: 130px;
        bottom: -10px;
    }

    .service-bottom {
        margin-bottom: 15px;
        padding-top: 70px;
    }

    .service-bottom::before,
    .service-bottom::after {
        bottom: 137px;
    }

    .service-bottom::after {
        bottom: 110px;
    }

    .vision-card {
        padding: var(--spacing-xl);
    }

    section.process {
        padding: var(--spacing-5xl) 0;
    }

    .design-content {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        min-height: 290px;
    }

    .service-card .title {
        gap: 15px;
    }

}