@media screen and (max-width:767px) {

    /* header */
    .navbar-brand img,
    .navbar.sticky-header img {
        max-width: 160px;
    }

    /* Hero Banner */
    .hero-heading--wrapper {
        border-radius: 0;
        background: transparent;
        padding: 0 15px 0 0;
    }

    .hero-heading--wrapper::after,
    .hero-heading--wrapper::before {
        display: none;
    }

    .hero-heading--wrapper.sec-heading span {
        margin-bottom: 18px;
        font-size: 15px;
        max-width: 200px;
    }

    .hero-heading--wrapper h1 {
        font-size: 34px;
        letter-spacing: -0.76px;
        line-height: 1.10;
        max-width: 270px;
    }

    .hero-banner--wrapper img {
        border-radius: 16px;
        margin: 0 auto;
        width: 100%;
    }

    .hero-content--wrapper {
        flex-direction: column-reverse;
        padding: 0 20px;
        gap: 10px;
    }

    .hero-desc--wrapper {
        width: 100%;
        padding: 34px 20px;
        margin-top: -200px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.85);
        box-shadow: -2px 2px 8px 0 rgba(0, 0, 0, 0.10);
        backdrop-filter: blur(37.5px);
        min-height: auto;
    }

    .hero-desc--wrapper p {
        font-size: 18px;
        letter-spacing: 0;
        line-height: 1.7;
        margin-bottom: 13px;
        min-height: auto;
    }

    .hero-card--wrapper {
        width: 100%;
        gap: 10px;
        margin-top: 0;
        flex-direction: column;
    }

    .hero-card {
        width: 100%;
    }

    .hero-card a {
        padding: 39px 20px;
        min-height: auto;
        font-size: 26px;
        line-height: 1.20;
        letter-spacing: -0.52px;
        border-radius: 12px;
    }

    .hero-card a svg {
        top: 50%;
        transform: translateY(-50%);
    }

    .hero-card a br {
        display: none;
    }

    .hero-banner--wrapper {
        padding-bottom: 0;
        padding-top: 40px;
    }

    .hero-heading--wrapper span:before {
        top: 6px;
    }

    .desktop_show {
        display: none;
    }

    /* Footer */
    .footer-top--wrapper {
        flex-direction: column-reverse;
    }

    .footer--wrapper {
        padding: 76px 20px 40px;
        margin-bottom: 30px;
        margin-top: 100px;
    }

    .footer-info h2 {
        font-size: 32px;
        letter-spacing: -0.64px;
        font-family: 'Helvetica Now Display';
    }

    .footer-info a {
        margin-top: 25px;
    }

    .footer-menu--wrapper {
        gap: 34px 70px;
        flex-direction: column;
    }

    .footer-menu--wrapper h3 {
        margin: 0 0 0;
        font-size: 20px;
        line-height: 1;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .footer-menu.active h3 {
        color: #7FA6FF;
    }

    .footer-menu.active svg {
        transform: rotate(180deg);
    }

    .footer-menu.active svg path {
        fill: #7FA6FF;
    }

    .footer-menu ul {
        display: none;
        min-height: 0;
        transition: all 0.4s;
    }

    .footer-menu {
        overflow: hidden;
    }

    .footer-menu.active ul {
        display: block;
        min-height: auto;
        margin-top: 25px;
    }

    .footer-menu ul li:not(:last-child) {
        margin-bottom: 25px;
    }

    .footer-menu--wrapper a {
        font-size: 18px;
    }

    .footer-contact-info {
        border-top: 1px solid #3F3F3F;
        padding-top: 20px;
        padding-bottom: 45px;
    }

    .footer-menu--wrapper .footer-contact-info h3 {
        font-size: 22px;
        font-family: 'HelveticaNowDisplay-Medium';
        margin-bottom: 23px;
    }

    .footer-menu--wrapper .footer-contact-info a,
    .footer-menu--wrapper p {
        font-size: 16px;
        font-family: 'HelveticaNowDisplay-Light';
    }

    .footer-contact-info a {
        margin-bottom: 16px;
    }

    .footer-bottom {
        padding-top: 38px;
        margin-top: 38px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .footer-menu--wrapper p {
        line-height: 1.4;
    }

    .footer-bottom p,
    .footer-bottom a {
        font-size: 12px;
    }

    .footer-bottom ul {
        gap: 30px;
    }

    .footer-bottom ul li:first-child a:after {
        top: 55%;
        right: -15px;
    }

    .back-to-top {
        padding: 0px 0px 10px 22px;
        gap: 13px;
        font-size: 16px;
        top: -1px;
        right: -1px;
    }

    .back-to-top svg {
        width: 12px;
        height: auto;
        position: relative;
        top: -2px;
    }

    .back-to-top:after {
        left: -16px;
    }

    /* Mission */
    .mission-sec {
        padding: 100px 0;
        margin-top: 40px;
    }

    .mission--wrapper {
        gap: 34px;
    }

    .mission--wrapper span {
        margin-top: 0;
    }

    .service-heading-col .sec-heading span {
        margin-bottom: 22px;
    }

    .sec-heading span {
        font-size: 16px;
        padding-left: 14px;
        letter-spacing: 0;
        gap: 19px;
        margin-bottom: 22px;
    }

    .mission-sec .sec-heading span {
        margin-bottom: 0;
    }

    .mission-content p {
        font-size: 18px;
        letter-spacing: 0;
        line-height: 1.8;
        text-indent: 0;
    }

    .mission-content a {
        margin-top: 46px;
    }

    /* Our Work */
    .work--wrapper {
        padding: 100px 0;
    }

    .work--wrapper .work-tag-bg {
        transform: none;
    }

    .project--wrapper .work-tag:after {
        width: 15px;
        height: 15px;
        left: -15px;
    }

    .project--wrapper .work-tag-bg .bottom-right-corner {
        bottom: -20px;
    }

    .project--wrapper .work-tag-bg svg {
        width: 20px;
    }

    .project--wrapper>div {
        width: 100%;
    }

    .sec-heading h2 {
        font-size: 32px;
        letter-spacing: -0.64px;
        line-height: 1.1;
    }

    .project--wrapper h2 {
        max-width: 280px;
    }

    .sec-heading p {
        font-size: 18px;
        margin-top: 20px;
        line-height: 1.6;
        margin-bottom: 0;
    }

    .work-media {
        padding-bottom: 0;
        min-height: 311px;
    }

    .work-info h3 {
        font-size: 32px;
        letter-spacing: -0.64px;
        line-height: 1.2;
        margin-bottom: 13px;
    }

    .work-info:after {
        background: linear-gradient(357deg, rgba(21, 21, 21, 0.75) 21.49%, rgba(21, 21, 21, 0.00) 63.61%);
    }

    .work-info h3 br {
        display: none;
    }

    .work-info p {
        display: none;
    }

    .work-box a {
        color: #D8D8D8;
    }

    .work-tag li {
        padding: 7px 10px;
        border-radius: 6px;
        font-size: 12px;
        letter-spacing: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .work-tag-bg::after,
    .work-tag-bg::before {
        opacity: 1;
        width: 8px;
        height: 8px;
        visibility: visible;
    }

    .work-tag-bg::after {
        left: -8px;
    }

    .work-tag-bg::before {
        bottom: -8px;
    }

    .work-tag::after {
        width: 100%;
        height: 100%;
    }

    .work-tag {
        gap: 5px;
        padding: 0px 0px 8px 8px;
    }

    .work-info {
        padding: 20px 20px 30px 20px;
    }

    .work-box {
        position: relative;
        margin-top: 20px;
    }

    .work-left-col .explor-btn,
    .work-right-col .sec-heading {
        display: none;
    }

    .project--wrapper {
        gap: 0;
    }

    .explor-btn {
        margin-top: 80px;
        text-align: center;
    }

    .explor-btn h4 {
        font-size: 28px;
        letter-spacing: -0.56px;
        margin-bottom: 25px;
    }

    .def-btn {
        gap: 17px;
        padding: 10px 10px 10px 15px;
        justify-content: space-between;
        font-size: 16px;
        letter-spacing: -.32px;
        width: 100%;
    }

    .def-btn span {
        width: 30px;
        height: 20px;
    }

    .work-left-col .sec-heading {
        margin-bottom: 40px;
    }

    /* Our Service */
    .service--wrapper {
        gap: 56px;
        padding: 100px 0;
    }

    .service-heading-col {
        width: 100%;
        position: relative;
        top: 0;
    }

    .service-info-col {
        width: 100%;
    }

    .service--wrapper h2 {
        max-width: 240px;
    }

    .service-heading-col p {
        font-size: 18px;
        letter-spacing: 0;
        line-height: 1.6;
        max-width: 100%;
        margin: 20px 0 0;
    }

    .service-heading-col a.def-btn {
        display: none;
    }

    .service-info-col .service-accordian:not(:last-child) {
        margin-bottom: 20px;
    }

    .service-heading h3 {
        font-size: 26px;
        letter-spacing: -0.52px;
        line-height: 1.2;
    }

    .service-heading {
        margin-bottom: 20px;
        gap: 25px;
    }

    .service-icon {
        border-radius: 6px;
        min-width: 30px;
        width: 30px;
        height: 30px;
    }

    .service-icon svg {
        width: 12px;
        height: auto;
    }

    .service-heading h3 sup {
        font-size: 16px;
        top: -7px;
    }

    .service-info li {
        font-size: 18px;
        padding-left: 24px;
        margin-bottom: 15px;
    }

    .service-info li:after {
        border-radius: 2px;
        width: 14px;
        height: 14px;
        top: 2px;
    }

    .service-info li:before {
        border-radius: 1px;
        width: 12px;
        height: 12px;
        top: 6px;
        left: 4px;
    }

    .service-info a {
        margin-top: 44px;
    }

    .service-inner-body {
        padding-top: 10px;
        padding-bottom: 40px;
    }

    .service-inner-body .d-flex {
        flex-direction: column;
    }

    .service-inner-body .d-flex a:last-child {
        margin-top: 7px;
    }

    .service-info ul {
        column-count: 1;
    }

    .service-info ul li br {
        display: none;
    }

    .service-info-col a.def-btn {
        margin: 60px auto 0;
    }

    /* About */
    .about-heading {
        left: 0;
        max-width: 100%;
        min-width: 100%;
        width: 100%;
        padding-left: 0;
        padding-bottom: 30px;
        margin-bottom: 0;
    }

    .about--wrapper {
        padding: 100px 0;
    }

    .about-img-col,
    .about-info-col {
        width: 100%;
    }

    .about-img-col img {
        border-radius: 14px;
    }

    .about-heading span {
        font-size: 16px;
        gap: 10px;
        position: relative;
        top: 0;
        left: 1px;
    }

    .about-heading h2 {
        font-size: 28px;
        letter-spacing: -0.56px;
        line-height: 1.2;
        text-indent: 0;
        margin: 22px 0 0;
    }

    .about-heading:after,
    .about-heading:before {
        display: none;
    }

    .about-info-col img {
        border-radius: 12px;
        margin-bottom: 40px;
    }

    .about-info--wrapepr {
        gap: 50px;
    }

    .about-info-col a {
        margin-top: 26px;
    }

    .about-info-col p:not(:last-child) {
        margin-bottom: 20px;
    }

    .about-info-col p {
        font-size: 18px;
        letter-spacing: 0;
        line-height: 1.6;
    }

    /* Our Blog */
    .our-blog--wrapper {
        padding: 100px 0;
    }

    .blog-heading--wrapper a {
        display: none;
    }

    .our-blog--wrapper .def-btn {
        margin: 40px auto 0;
    }

    .blog-box,
    .blog-box--wrapper .blog-box:first-child {
        width: 100%;
    }

    .blog-box--wrapper {
        gap: 38px;
        margin-top: 34px;
    }

    .blog-img {
        padding-bottom: 60%;
        border-radius: 20px;
        margin-bottom: 20px;
    }

    .blog-box span {
        font-size: 12px;
    }

    .blog-box h2 {
        font-size: 24px;
        margin: 12px 0 0;
        letter-spacing: -0.48px;
    }

    .blog-box p {
        font-size: 16px;
        letter-spacing: -0.35px;
        line-height: 1.55;
    }

    .blog-tag li {
        border-radius: 6px;
        padding: 8px 10px;
        font-size: 12px;
    }

    .blog-top--wrapper {
        gap: 20px;
    }

    /* CTA Slider */
    .cta-slider p {
        font-size: 52px;
        letter-spacing: -1.04px;
    }

    .cta-slider p svg {
        width: 22px;
        height: auto;
        margin-left: 20px;
    }

    .cta-slider--wrapper {
        padding: 54px 0;
    }

    .cta-slider {
        margin-bottom: 0;
    }

    .cta-slider--wrapper .cta-slider:not(:last-child) {
        margin-bottom: 15px;
    }

    /* ================================= About Page ================================= */
    .about-hero-banner--wrapper {
        gap: 40px;
        padding-bottom: 30px;
        flex-direction: column-reverse;
        padding: 40px 0 60px;
    }

    .sec-heading span::after {
        width: 4px;
        height: 4px;
    }

    .about-hero-left-col,
    .about-hero-right-col {
        width: 100%;
    }

    .about-hero-img {
        height: 200px;
        position: relative;
        border-radius: 18px;
        overflow: hidden;
    }

    .about-hero-img img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .about-hero-left-col h1 {
        font-size: 37px;
        line-height: 1.10;
        letter-spacing: -0.76px;
        margin-top: 0;
        margin-bottom: 30px;
    }

    .about-hero-right-col img {
        border-radius: 13px;
    }

    .about-content-box {
        border-radius: 14px;
        padding: 35px 20px;
        margin-top: 20px;
    }

    .about-content-box p:not(:last-child) {
        margin-bottom: 26px;
    }

    .about-content-box p {
        letter-spacing: 0;
        font-size: 18px;
        color: #151515;
        line-height: 1.4;
    }

    .about-hero-right-col a.def-btn {
        margin: 0 auto;
    }

    .mission--wrapper.about-content--wrapper {
        padding: 40px 0 100px;
        gap: 30px;
    }

    .about-content--wrapper .sec-heading span {
        margin-bottom: 0;
    }

    .about-content--wrapper .mission-content p {
        /* padding-right: 20px; */
    }

    .stats--wrapper {
        padding: 100px 0 0;
    }

    .stats--wrapper .col-4 {
        width: 100%;
        min-height: auto;
    }

    body .stats--wrapper p {
        font-size: 20px;
        padding-bottom: 24px;
        margin-bottom: 23px;
    }

    .stats--wrapper h2 {
        font-size: 34px;
        line-height: 1.10;
        font-family: 'HelveticaNowDisplay-Regular';
        font-weight: 400;
        letter-spacing: -0.68px;
        max-width: 380px;
    }

    .stats--wrapper .ref-rate {
        padding-bottom: 0;
    }

    .stats--wrapper .row {
        gap: 62px;
    }

    .team-heading--wrapper {
        flex-direction: column;
        gap: 20px;
        align-items: start;
    }

    .team-heading--wrapper p {
        font-size: 18px;
        letter-spacing: 0;
        line-height: 1.6;
    }

    .team-slider {
        margin: 32px 0 68px;
    }

    .team-box img {
        border-radius: 14px;
    }

    .team-member-info {
        margin-top: 20px;
    }

    .team-member-info h6 {
        font-size: 22px;
        letter-spacing: -0.44px;
        line-height: 1;
        margin-bottom: 6px;
    }

    .team-member-info span {
        font-size: 14px;
        letter-spacing: 0;
        line-height: 1.2;
    }

    a.arrow-btn {
        gap: 8px;
        letter-spacing: -0.32px;
        font-size: 16px;
        font-family: 'HelveticaNowDisplay-Medium';
    }

    .our-team--wrapper {
        padding: 94px 0px 50px;
        overflow: hidden;
    }

    .team-heading--wrapper h2 {
        max-width: 350px;
    }

    .client--wrapper .sec-heading h2 {
        font-size: 24px;
        letter-spacing: -0.48px;
        max-width: 350px;
    }

    .client-logo--wrapper {
        gap: 10px;
        margin: 35px 0 40px;
    }

    .logo-box {
        width: calc(33.33% - 6.66px);
        border-radius: 10px;
        padding: 15px 10px;
    }

    .project-heading--wrapper {
        gap: 80px;
        margin-bottom: 40px;
    }

    .full-width-col .work-box {
        flex-direction: column;
    }

    .our-project--wrapper .col-12 .work-media {
        padding: 0;
        min-height: 349px;
    }

    .our-project--wrapper .col-12 .work-info h3 {
        margin-bottom: 13px;
        margin-top: 0;
    }

    .our-project--wrapper .work-box {
        overflow: auto;
    }

    .case-study-project--wrapper .our-project--wrapper .work-box {
        overflow: hidden;
    }

    .our-project--wrapper .work-tag-bg {
        top: -1px;
        right: -1px;
    }

    .our-project--wrapper .work-tag-bg::after {
        left: -17px;
    }

    .our-project--wrapper .work-tag-bg::before {
        bottom: -17px;
    }

    .our-project--wrapper .col-12 .work-info p {
        font-size: 16px;
        letter-spacing: -0.25px;
        line-height: 1.55;
        max-width: 100%;
    }

    .our-project--wrapper .col-6 {
        width: 100%;
    }

    .our-project--wrapper .row {
        margin: 0 -20px 0;
    }

    .our-project--wrapper .def-btn {
        margin: 40px auto 0;
    }

    .heading-with-text.sec-heading span {
        position: relative;
        top: 0;
    }

    .heading-with-text.sec-heading h2 {
        margin: 20px 0 0;
        text-indent: 0;
        line-height: 1.2;
    }

    .case-study-commb .heading-with-text.sec-heading h2 {
        max-width: 290px;
    }

    .case-study-canton .heading-with-text.sec-heading h2 {
        max-width: 383px;
    }

    .case-study-hempelf .heading-with-text.sec-heading h2 {
        max-width: 310px;
    }

    .case-study-soakness .heading-with-text.sec-heading h2 {
        max-width: 290px;
    }

    .story-slider--wrapper.pt-150 {
        padding: 60px 0;
        flex-direction: column;
        gap: 0;
    }

    .client-slider {
        overflow: hidden;
    }

    .story-left-col {
        width: 100%;
        flex-direction: row;
        gap: 30px;
    }

    .story-slider--wrapper .story-slider {
        width: 100%;
        margin-top: 54px;
        overflow: visible;
    }

    .story-content-box {
        padding: 30px 20px;
    }

    .story-content-box img {
        width: 66px;
    }

    .story-content-box p {
        font-size: 16px;
        margin-top: 33px;
    }

    .story-info {
        margin-top: 54px;
    }

    .story-content-box .quote-icon {
        top: 30px;
        right: 30px;
        width: 80px;
        height: auto;
    }

    .story-slider-pagination {
        gap: 8px;
        padding: 0;
    }

    .story-slider-pagination .swiper-arrow {
        border-radius: 4px;
        width: 28px;
        height: 28px;
    }

    .story-slider-pagination .swiper-arrow svg {
        width: 6px;
    }

    .client-info h3 {
        font-size: 18px;
        letter-spacing: -0.34px;
        margin-bottom: 7px;
    }

    .client-info span {
        font-size: 14px;
        line-height: 1.2;
    }

    .company-logo {
        border-radius: 4px;
        width: 40px;
        min-width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .project-heading--wrapper .def-btn {
        display: none;
    }

    .pt-150.client--wrapper {
        padding: 100px 0;
        margin-top: -1px;
    }

    .pt-150 {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .about-cta--wrapper {
        padding: 40px 20px 80px;
        border-radius: 0px 0px 20px 20px;
        margin-bottom: 60px;
    }

    .about-cta--wrapper h2 {
        font-size: 38px;
        letter-spacing: -0.76px;
    }

    .about-cta--wrapper p {
        font-size: 18px;
        letter-spacing: 0;
        line-height: 1.6;
        margin: 25px auto 23px;
    }

    .about-cta--wrapper .def-btn {
        width: fit-content;
    }

    /* ============================================= Services Page ============================================= */
    .service-hero-banner--wrapper {
        border-radius: 20px;
        padding: 80px 20px 70px 20px;
        margin: 40px 0 0;
    }

    .service-hero-banner--wrapper h1 {
        font-size: 38px;
        letter-spacing: -0.76px;
        max-width: 320px;
    }

    .service-hero-banner--wrapper span {
        font-size: 16px;
        margin-bottom: 22px;
        padding-left: 14px;
    }

    .service-hero-banner--wrapper span:after {
        width: 4px;
        height: 4px;
    }

    .services-detail--wrapper {
        padding: 100px 0;
        overflow: hidden;
    }

    .service-card--wrapper.carousel {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 40px;
    }

    .service-card--wrapper.carousel .service-card,
    .service-card--wrapper.carousel .service-card-detail {
        max-width: 278px;
    }

    .service-heading--wrapper h2 {
        font-size: 38px;
        letter-spacing: -0.76px;
        line-height: 1.10;
        width: 100%;
        padding-right: 140px;
    }

    .service-heading--wrapper .mobile_show {
        position: absolute;
        right: 0;
        top: 4px;
    }

    .service-heading--wrapper {
        gap: 20px;
        flex-direction: column;
        position: relative;
    }

    .service-heading--wrapper p {
        font-size: 18px;
        line-height: 1.6;
    }

    .service-card--wrapper {
        gap: 20px;
        margin-top: 40px;
    }

    .service-card {
        width: 100%;
        padding: 30px 20px 22px;
    }

    .service-card--wrapper.carousel .service-card h3 {
        margin-bottom: 30px;
    }

    .service-card p,
    .service-card-detail p,
    .service-card-detail .def-btn {
        display: none;
    }

    .service-card h3 {
        font-size: 26px;
        letter-spacing: -0.52px;
        margin-bottom: 20px;
    }

    .service-card svg {
        top: 30px;
    }

    .service-card-detail {
        width: 100%;
        padding: 40px 20px;
    }

    .service-card-detail h4 {
        font-size: 14px;
        font-family: 'HelveticaNowDisplay-Medium';
    }

    .service-card-detail ul {
        margin: 15px 0 0;
    }

    .service-card-detail li:before {
        width: 13px;
        height: 13px;
        top: 5.5px;
    }

    .service-card-detail ul li:not(:last-child) {
        margin-bottom: 12px;
    }

    .service-card-detail li {
        font-size: 18px;
        padding-left: 22px;
    }

    .services-detail--wrapper a.def-btn {
        max-width: 205px;
        margin-left: auto;
        margin-top: 40px;
    }

    .service-card h3 sup {
        font-size: 14px;
        top: -9px;
    }

    .industry-tools--wrapper h2 span {
        text-align: left;
        display: inline;
        margin-top: 0;
    }

    .industry-tools--wrapper h2 br {
        display: none;
    }

    .industry-tools--wrapper h2 {
        font-size: 34px;
        letter-spacing: -0.68px;
        margin-bottom: 35px;
        max-width: 380px;
    }

    .tools-box img {
        max-height: 60px;
    }

    .tools-box {
        border-radius: 10px;
        padding: 10px;
    }

    .tools-slider.dir-rtl {
        margin: 12px 0;
    }

    .industry-tools--wrapper a.def-btn {
        margin-top: 40px;
        width: fit-content;
    }

    .blog-slider--wrapper {
        gap: 0;
        padding: 60px 0;
    }

    .blog-slider-left-col {
        width: 100%;
        flex-direction: row;
    }

    .blog-slider-right-col {
        width: 100%;
        margin-top: 74px;
    }

    .blog-slider--wrapper h2 {
        max-width: 300px;
    }

    .blog-slider--container {
        padding: 0;
    }

    .blog-slider--container .blog-slider-left-col,
    .blog-slider.swiper {
        padding: 0 20px;
    }

    .blog-slider-right-col h3 {
        max-width: 230px;
    }

    .blog-slider-right-col .blog-img {
        padding: 0;
        height: 200px;
    }

    /* ============================================= Branding Services Page ============================================= */
    .service-hero-intro-banner--wrapper .hero-left-col,
    .service-hero-intro-banner--wrapper .hero-right-col {
        width: 100%;
    }

    .service-hero-intro-banner--wrapper span {
        padding: 10px 15px 11px 14px;
        font-size: 16px;
    }

    .service-hero-intro-banner--wrapper span u {
        width: 4px;
        height: 4px;
        top: 49%;
    }

    .service-hero-intro-banner--wrapper {
        border-radius: 20px;
        padding: 80px 20px 40px;
        gap: 60px;
        margin: 40px 0 0;
    }

    .hero-left-col h1 {
        font-size: 32px;
        letter-spacing: -0.64px;
        margin-bottom: 26px;
    }

    .service-hero-intro-banner--wrapper span::before {
        bottom: -17px;
    }

    .service-hero-intro-banner--wrapper span:after {
        right: -17px;
    }

    .hero-left-col p {
        font-size: 18px;
        line-height: 1.4;
    }

    .service-intro--wrapper,
    .service-intro--wrapper.service-web-dev-intro--wrapper {
        padding: 100px 0;
        gap: 0;
        flex-direction: column;
    }

    .intro-content p:not(:last-of-type) {
        margin-bottom: 28px;
    }

    .intro-content p:first-child {
        text-indent: 0;
    }

    .intro-content p {
        font-size: 18px;
        line-height: 1.8;
    }

    .service-process-sec.pt-150,
    .bg-black.pt-150 {
        padding: 60px 0;
    }

    .service-process--wrapper {
        gap: 0;
    }

    .service-process--wrapper>*,
    .breakdown--wrapper>*,
    .why-us--wrapper>*,
    .faq--wrapper>*,
    .why-us--wrapper.why-us--wide .why-us-content-col,
    .why-us--wrapper.why-us--wide .why-us-heading-col {
        width: 100%;
    }

    .process-left-col a {
        display: none;
    }

    .process-box span {
        font-size: 52px;
        letter-spacing: -1.56px;
        line-height: 1;
    }

    .process-right-col .process-box:not(:last-child) {
        margin-bottom: 50px;
    }

    .process-box span {
        font-size: 52px;
        letter-spacing: -1.56px;
        line-height: 1;
    }

    .process-box h3 {
        font-size: 32px;
        letter-spacing: -0.64px;
        margin-bottom: 17px;
        margin-top: 6px;
    }

    .process-box p {
        font-size: 18px;
    }

    .process-left-col h2 {
        font-size: 34px;
        letter-spacing: -0.68px;
        line-height: 1.10;
        margin-bottom: 60px;
        max-width: 280px;
    }

    .process-box,
    .process-box span {
        opacity: 1;
    }

    .process-right-col .process-box span {
        background: none;
        color: #7FA6FF;
        -webkit-text-fill-color: unset;
    }

    .process-right-col {
        margin-bottom: 60px;
    }

    .breakdown-left-col br,
    .breakdown-left-col a {
        display: none;
    }

    .breakdown-left-col p:not(:last-of-type) {
        margin-bottom: 28px;
    }

    .breakdown--wrapper h2 {
        max-width: 330px;
    }

    .breakdown-left-col p {
        font-size: 18px;
    }

    .breakdown-left-col .sec-heading {
        margin-bottom: 20px;
    }

    .breakdown--wrapper {
        gap: 54px;
        margin-top: -1px;
    }

    .breakdown-right-col {
        padding: 40px 40px 40px 20px;
    }

    .breakdown-right-col h6 {
        font-size: 24px;
        letter-spacing: -0.48px;
        max-width: 126px;
        margin-bottom: 29px;
    }

    .service-list-box h3 {
        font-size: 24px;
        letter-spacing: -0.48px;
    }

    .service-list-box li::before {
        width: 12px;
        height: 12px;
        top: 7px;
    }

    .breakdown-right-col li:before {
        width: 12px;
        height: 12px;
        top: 7px;
    }

    .breakdown-right-col h3 {
        margin-bottom: 60px;
    }

    .service-list-box li,
    .cro-support--wrapper .service-list-box li {
        font-size: 18px;
        line-height: 1.40;
        padding-left: 21px;
    }

    .breakdown-right-col li {
        font-size: 18px;
        line-height: 1.40;
        padding-left: 21px;
    }

    .breakdown-right-col li:not(:last-child) {
        margin-bottom: 12px;
    }

    .breakdown--wrapper a.arrow-btn.wht-color {
        justify-content: end;
        margin-top: 5px;
    }

    .why-us--wrapper {
        gap: 0;
    }

    .why-us-content-col p:not(:last-of-type) {
        margin-bottom: 22px;
    }

    .why-us-content-col p {
        font-size: 18px;
    }

    .why-us-heading-col h2 {
        font-size: 38px;
        letter-spacing: -0.76px;
        margin-bottom: 14px;
        font-family: 'HelveticaNowDisplay-Medium';
        max-width: 270px;
    }

    .service-ecommerce-dev .why-us-heading-col h2 {
        max-width: 290px;
    }

    .why-us-content-col a {
        margin-top: 50px;
        width: fit-content;
    }

    .why-us-sec.pt-150 {
        padding: 60px 0;
    }

    .project-heading--wrapper a {
        display: none;
    }

    .our-project--wrapper .work-media {
        padding: 0;
    }

    .faq--wrapper {
        gap: 54px;
        padding: 60px 0 74px;
    }

    .faq-heading-col,
    .why-us-heading-col,
    .process-left-col {
        position: relative;
        top: 0;
    }

    .faq-heading-col h2 {
        max-width: 250px;
    }

    .faq-heading-col h2 br {
        display: none;
    }

    .accordian-heading {
        gap: 20px;
    }

    .accordian-heading h3 {
        font-size: 18px;
        letter-spacing: 0;
    }

    .accordian-inner-body {
        padding-top: 0;
        padding-bottom: 33px;
        padding-right: 30px;
    }

    .accordian-body p {
        font-size: 16px;
    }

    .faq-body-col .accordian:not(:first-child) {
        padding-top: 36px;
    }

    body.service-details-page .faq--wrapper {
        padding-top: 0;
        padding-bottom: 100px;
    }

    body.service-details-page .story-slider--wrapper.pt-150 {
        padding-bottom: 40px;
    }

    /* ============================================= Web development Services Page ============================================= */
    .service-hero-intro-banner--wrapper.web-dev-hero--wrapper {
        gap: 40px;
    }

    .service-web-dev-intro--wrapper .sec-heading span {
        margin-bottom: 28px;
    }

    .web-dev-process--wrapper h2 {
        font-size: 34px;
        letter-spacing: -0.68px;
        max-width: 290px;
    }

    .process-box--wrapper {
        width: 100%;
    }

    .process-heading span {
        width: 40px;
        min-width: 40px;
        height: 40px;
        font-size: 26px;
        letter-spacing: -0.78px;
    }

    .process-heading h3 {
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -0.64px;
    }

    .cms-process--wrapper .process-heading h3 {
        font-size: 25px;
    }

    .service-process-box p {
        font-size: 18px;
        padding-right: 20px;
    }

    .process-heading {
        gap: 14px;
        margin-bottom: 26px;
    }

    .process-box--wrapper .service-process-box:not(:first-child),
    .process-box--wrapper a {
        margin-top: 54px;
    }

    .dev-process-box--wrapper .process-box--wrapper:last-child {
        padding-top: 0;
    }

    .dev-process-box--wrapper {
        gap: 0;
        margin-top: 54px;
    }

    .web-dev-breakdown-sec {
        padding: 60px 0;
        margin-top: -1px;
    }

    .web-dev-breakdown--wrapper p:not(:last-of-type) {
        margin-bottom: 33px;
    }

    .web-dev-breakdown--wrapper p {
        font-size: 18px;
    }

    .web-dev-breakdown--wrapper .sec-heading {
        margin-bottom: 25px;
    }

    .breakdown-box {
        padding-top: 30px;
        margin-top: 54px;
    }

    .breakdown-box h6 {
        margin-bottom: 30px;
    }

    .breakdown-box ul {
        column-count: 1;
        column-gap: 0;
    }

    .breakdown-box ul li {
        margin-bottom: 18px;
    }

    .web-dev-breakdown--wrapper a {
        margin-top: 30px;
    }

    .dev-faq--wrapper .faq-heading-col h2 {
        max-width: 100%;
    }

    /* ============================================= Support Services Page ============================================= */
    .support-hero--wrapper {
        gap: 34px;
    }

    .support-intro--wrapper .intro-content {
        gap: 32px;
        flex-direction: column;
    }

    .support-heading--wrapper a,
    .support-breakdown-left-col a {
        display: none;
    }

    .support-heading--wrapper h2 {
        font-size: 34px;
        letter-spacing: -0.68px;
        max-width: 303px;
    }

    .support-process-box-slider .process-box span {
        font-size: 110px;
    }

    .support-process-box-slider .process-box h3 {
        margin-top: -36px;
        margin-bottom: 28px;
    }

    .support-process-box-slider {
        padding-top: 62px;
        margin-bottom: 72px;
    }

    .support-process--wrapper {
        padding: 20px 0;
    }

    .support-breakdown-sec {
        padding: 60px 0;
        margin-top: -1px;
    }

    .cro-support--wrapper ul li:nth-last-child(-n+3) {
        min-width: 100%;
    }

    .breakdown--wrapper .support-breakdown-left-col h2 {
        max-width: 340px;
    }

    .breakdown--wrapper .support-breakdown-left-col h2 {
        max-width: 100%;
    }

    .cro-support--wrapper.breakdown--wrapper .support-breakdown-left-col span {
        margin-bottom: 22px;
    }

    .breakdown--wrapper.support--wrapper {
        gap: 30px;
    }

    .support-breakdown-right-col p {
        font-size: 18px;
    }

    .support-breakdown-right-col p:not(:last-of-type) {
        margin-bottom: 30px;
    }

    .support-breakdown-right-col h3 {
        margin-top: 53px;
        padding-top: 32px;
        margin-bottom: 30px;
    }

    .support-breakdown-right-col ul {
        column-count: 1;
        column-gap: 0;
    }

    .support-breakdown-right-col ul li {
        margin-bottom: 16px;
    }

    .support-breakdown-left-col {
        position: relative;
        top: 0;
    }

    .breakdown--wrapper.support--wrapper a.arrow-btn.wht-color {
        justify-content: flex-start;
        margin-top: 30px;
    }

    .support-optimize--wrapper .why-us-heading-col h2 {
        max-width: 280px;
    }

    /* ============================================= FAQ Page ============================================= */
    .page-header--wrapper {
        border-radius: 20px;
        padding: 60px 20px 51px;
        margin: 40px 0;
    }

    .page-header--wrapper span {
        font-size: 16px;
        padding-left: 14px;
    }

    .page-header--wrapper span:after {
        width: 4px;
        height: 4px;
    }

    .page-header--wrapper h1 {
        font-size: 38px;
        letter-spacing: -0.76px;
        max-width: 260px;
    }

    .blog-header--wrapper.page-header--wrapper h1 {
        max-width: 100%;
    }

    .testimonial-box {
        padding: 60px 40px 60px 20px;
        border-radius: 18px;
    }

    .testimonial-nav {
        gap: 8px;
        padding-left: 20px;
        padding-top: 20px;
    }

    .testimonial-nav .swiper-arrow {
        width: 34px;
        height: 34px;
        border-radius: 6px;
    }

    .testimonial-nav .swiper-arrow svg {
        width: 20px;
        height: auto;
    }

    .testimonial-box img {
        max-width: 66px;
    }

    .testimonial-box p {
        font-size: 16px;
        line-height: 1.75;
        letter-spacing: -0.4px;
        margin-top: 32px;
    }

    .testimonial-box .client-info h3 {
        font-size: 16px;
        letter-spacing: -0.48px;
    }

    .testimonial-box .story-info {
        margin-top: 32px;
    }

    .newsletter-col-right button.def-btn {
        width: 100%;
        gap: 15px;
        padding: 10px;
    }

    .newsletter-box {
        margin-top: 40px;
        padding: 60px 20px;
        border-radius: 20px;
        gap: 34px;
    }

    .newsletter-box>div,
    .newsletter-field {
        width: 100%;
    }

    .newsletter-col-left h2 {
        font-size: 34px;
        letter-spacing: -1.02px;
        line-height: 1.17;
    }

    .newsletter-col-left p {
        font-size: 18px;
        letter-spacing: -0.54px;
        line-height: 1.66;
    }

    .newsletter-col-right form input {
        min-width: 100%;
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        padding: 10px;
        letter-spacing: -0.48px;
    }

    .newsletter--wrapper {
        padding: 60px 0;
    }

    .faq--wrapper.faq-sec {
        padding-top: 20px;
    }

    .faq-search-field input {
        padding: 16px 10px 16px 38px;
        font-size: 16px;
        border-radius: 8px;
    }

    .faq-search-field svg {
        left: 11px;
        width: 14px;
    }

    .faq-right-col h2 {
        font-size: 32px;
        line-height: 1.10;
        letter-spacing: -0.64px;
        margin-bottom: 5px;
    }

    .faq-search-field {
        margin-bottom: 10px;
    }

    .faq-right-col .accordian-inner-body {
        padding-right: 40px;
    }

    .accordian-inner-body li {
        font-size: 16px;
        padding-left: 16px;
    }

    ul.list-with-dots li:not(:last-child) {
        margin-bottom: 6px;
    }

    ul.list-with-dots {
        padding-left: 8px;
        margin: 20px 0;
    }

    .list-with-dots li:after,
    .accordian-content-right-col li:after {
        top: 9px;
    }

    .faq-right-col p:last-of-type {
        margin-bottom: 20px;
    }

    .list-with-check {
        column-count: 2;
        column-gap: 10px;
        padding: 10px 0 10px 10px;
    }

    .list-with-check li:after,
    .accordian-content-left-col a::after {
        width: 12px;
        height: 12px;
        top: 5px;
    }

    .faq-right-col .accordian-inner-body .list-with-check li {
        padding-left: 21px;
    }

    .list-with-check li:not(:last-child) {
        margin-bottom: 12px;
    }

    .accordian-content-col-wrapper {
        gap: 30px;
        padding-left: 10px;
        margin-top: 30px;
    }

    .accordian-content-col-wrapper>div {
        width: 100%;
    }

    .accordian-content-left-col a:not(:last-child) {
        margin-bottom: 20px;
    }

    .accordian-content-left-col a {
        padding-left: 21px;
        font-size: 16px;
    }

    .accordian-content-left-col a::after {
        top: 2px;
    }

    .accordian-content-right-col {
        border-radius: 10px;
        padding: 20px;
    }

    .accordian-content-right-col h6 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .faq-right-col .faq-content-box:not(:first-of-type) {
        margin-top: 54px;
    }

    .accordian-content-right-col ul {
        padding-left: 5px;
    }

    .testimonial-box .quote-icon {
        top: 25px;
        right: 22px;
        max-width: 108px;
    }

    /* ============================================= Contact Page ============================================= */
    .contact-form--wrapper {
        padding: 40px 0 60px;
    }

    .contact-form-columns {
        gap: 56px;
    }

    .contact-form-left-col {
        width: 100%;
        position: relative;
        top: 0;
    }

    .contact-form-right-col {
        width: 100%;
    }

    .contact-form-right-col .justify-content-end {
        justify-content: flex-start !important;
    }

    .contact-form-right-col .def-btn:hover {
        background-color: var(--main-color);
    }

    .contact-form-left-col h2 {
        font-size: 38px;
        letter-spacing: -0.76px;
        margin-bottom: 23px;
        max-width: 270px;
        font-family: 'HelveticaNowDisplay-Medium';
    }

    .contact-form-left-col p {
        line-height: 1.6;
        font-size: 18px;
    }

    .contact-field-box .contact-field {
        width: 100%;
    }

    .contact-field {
        margin-bottom: 20px;
    }

    .contact-field label,
    .contact-field p {
        font-size: 12px;
        margin-bottom: 13px;
        font-family: 'HelveticaNowDisplay-Medium';
        font-weight: 500;
        line-height: 1.2;
    }

    .contact-field input,
    .contact-field textarea {
        padding: 14px 10px;
        font-size: 16px;
    }

    .contact-field-box {
        gap: 0;
    }

    .radio-field-box {
        gap: 12px;
    }

    .contact-field .radio-field label {
        padding: 8px 15px;
        font-size: 16px;
        letter-spacing: -0.32px;
    }

    .contact-field label sup {
        top: 0;
        font-size: 12px;
    }

    .contact-field label u {
        display: block;
    }

    .contact-form-right-col button.def-btn {
        width: fit-content;
    }

    .things-process--wrapper {
        padding: 60px 0;
    }

    .things-process--wrapper .col-6 {
        width: 100%;
    }

    .things-process--wrapper img {
        width: 40px;
        height: auto;
    }

    .things-process--wrapper ul li {
        font-size: 18px;
        padding-left: 20px;
    }

    .things-process--wrapper ul li:after {
        width: 12px;
        height: 12px;
        top: 7px;
    }

    .things-process--wrapper h2 {
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -.064px;
        margin-top: 13px;
        margin-bottom: 28px;
    }

    .thing-we-do {
        padding-right: 12px;
    }

    .thing-we-dont {
        padding-left: 12px;
        border-left: none;
        border-top: 1px solid #3F3F3F;
        padding-top: 50px;
        margin-top: 45px;
    }

    .faq-section .faq--wrapper {
        padding-bottom: 60px;
    }

    .faq-section .faq-heading-col h2 {
        max-width: 231px;
    }

    /* ============================================= Case Study Page ============================================= */
    .case-study--wrapper {
        padding: 30px 0 60px;
    }

    .case-study--wrapper .arrow-btn,
    .work-box .arrow-btn {
        font-size: 16px;
        gap: 8px;
    }

    .case-study-top--wrapper form {
        width: 100%;
    }

    .case-study-top--wrapper .faq-search-field {
        max-width: 100%;
    }

    .case-study-top--wrapper .faq-search-field input {
        min-width: 100%;
    }

    .case-study--wrapper .row {
        row-gap: 20px;
    }

    .newsletter-sec .newsletter-col-left h2 br {
        display: none;
    }

    .newsletter-sec .newsletter-box {
        margin: 0 0 60px;
    }

    .case-study-filter--box {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
        overflow: hidden;
    }

    .case-study-filter--box a {
        padding: 8px 13px;
        font-size: 16px;
    }

    .case-study-filter--box ul {
        width: 100%;
        padding-bottom: 10px;
    }

    /* ============================================= Case Study Details Page ============================================= */
    .case-study-top-content span:after {
        width: 4px;
        height: 4px;
    }

    .case-study-top-content ul {
        gap: 8px;
    }

    .case-study-top-content ul li {
        border-radius: 6px;
        padding: 8px;
        font-size: 12px;
    }

    .case-study-top-content {
        gap: 40px;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .case-study-top-content span {
        font-size: 16px;
        padding-left: 14px;
    }

    .case-study-hero--wrapper h1 {
        font-size: 38px;
        letter-spacing: -0.76px;
        margin-bottom: 35px;
        margin-top: 22px;
    }

    .case-study-hero--wrapper h1 br {
        display: none;
    }

    .case-study-video {
        padding-top: 320px;
    }

    .case-study-hero--wrapper {
        margin: 40px 0;
    }

    .company-data--wrapper {
        padding: 40px 0;
    }

    .company-data--wrapper p {
        font-size: 20px;
        line-height: 1.8;
    }

    .company-box--wrapper {
        border-radius: 10px;
        padding: 40px 20px;
        margin-top: 30px;
    }

    .company-box--wrapper .col-4 {
        width: 50%;
    }

    .company-box--wrapper span {
        font-size: 12px;
        margin-bottom: 13px;
    }

    .company-box--wrapper p {
        font-size: 18px;
        line-height: 1.2;
    }

    .company-box--wrapper p a {
        font-size: 16px;
        word-break: break-word;
        letter-spacing: -0.32px;
    }

    .company-box--wrapper .row {
        row-gap: 34px;
    }

    .case-study-summary--wrapper {
        padding: 60px 0;
    }

    .case-study-summary--wrapper p {
        font-size: 18px;
        line-height: 1.6;
        margin: 24px 0 52px;
    }

    .case-study-summary--wrapper h2 {
        font-size: 34px;
    }

    .case-study-summary--wrapper h2 br {
        display: none;
    }

    .case-study-challenge--wrapper {
        gap: 23px;
        padding: 40px 0 60px;
    }

    .challenge-left-col {
        width: 100%;
        position: relative;
        top: 0;
    }

    .challenge-right-col {
        width: 100%;
    }

    .challenge-right-col p {
        font-size: 18px;
        line-height: 1.6;
    }

    .challenge-include-box {
        margin-top: 32px;
        padding-top: 32px;
    }

    .challenge-include-box h3 {
        font-size: 24px;
        letter-spacing: -0.48px;
        margin-bottom: 26px;
        line-height: 1.2;
        font-family: 'HelveticaNowDisplay-Medium';
        color: #606060;
    }

    .challenge-include-box ul {
        column-count: 1;
    }

    .challenge-include-box ul li {
        font-size: 18px;
        padding-left: 21px;
        margin-bottom: 17px;
    }

    .challenge-include-box svg {
        width: 12px;
        height: 12px;
        top: 7px;
    }

    .case-study-solution--wrapper .sec-heading p {
        font-size: 18px;
        line-height: 1.6;
        margin: 25px 0 0;
    }

    .case-study-solution-box {
        margin-top: 40px;
        padding-top: 40px;
    }

    .case-study-solution-box h3 {
        font-size: 24px;
        letter-spacing: -0.48px;
        margin-bottom: 18px;
    }

    .img-with-text-col>div {
        width: 100%;
    }

    .text-col {
        padding: 40px 20px;
    }

    .text-col .counter-box .counter {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .text-col .counter-box:not(:last-child) {
        margin-bottom: 22px;
    }

    .case-study-solution-box p {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 34px;
    }

    .case-study-solution-box .col-6 {
        width: 100%;
    }

    .case-study-solution-box .col-6 img {
        max-height: 290px;
        width: 100%;
        object-fit: cover;
        object-position: top;
    }

    .case-study-canton .case-study-solution-box .col-6 img,
    .case-study-soakness .case-study-solution-box .col-6 img {
        max-height: none;
    }

    .case-study-result--wrapper {
        padding: 80px 0;
    }

    .case-study-result-heading--wrapper {
        gap: 32px;
        flex-direction: column;
        align-items: flex-start;
    }

    .case-study-result-left-col {
        width: 100%;
    }

    .case-study-result-right-col {
        width: 100%;
        padding: 40px 20px;
    }

    .case-study-result-right-col .row>div {
        padding: 0 10px;
    }

    .case-study-result-right-col .row {
        margin: 0 -10px;
        row-gap: 26px;
    }

    .counter-box .counter {
        font-size: 24px;
        letter-spacing: -0.48px;
    }

    .case-study-result-heading--wrapper .case-study-result-right-col p {
        font-size: 14px;
        line-height: 1.2;
        margin-top: 3px;
    }

    .case-study-brundge .case-study-solution--wrapper h2 br {
        display: none;
    }

    .case-study-result-heading--wrapper p,
    .case-study-result-content--wrapper .case-study-result-left-col p {
        font-size: 18px;
        line-height: 1.6;
    }

    .case-study-result-content--wrapper {
        gap: 25px;
    }

    .case-study-result-content--wrapper .case-study-result-left-col {
        position: relative;
        top: 0;
    }

    .strength-box h3 {
        font-size: 20px;
        line-height: 1.21;
    }

    .strength-box p {
        font-size: 17px;
        line-height: 1.5;
    }

    .strength-box svg {
        width: 14px;
        height: 14px;
    }

    .strength-box {
        padding-left: 25px;
    }

    .case-study-result-right-col .strength-box:not(:last-child) {
        margin-bottom: 30px;
    }

    .case-study-result-content--wrapper .case-study-result-right-col {
        padding-bottom: 40px;
    }

    .after-before--wrapper-main {
        padding: 20px;
        border-radius: 10px;
        margin-top: 40px;
        max-width: 390px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .left-img {
        border-radius: 10px 0 0 10px;
    }

    .right-img {
        border-radius: 0 10px 10px 0;
    }

    .transformation-text {
        margin-top: 10px;
    }

    .transformation-text p {
        font-size: 12px;
        padding: 6px 12px;
    }

    .case-study-testimonial--wrapper.pt-150,
    .case-study-solution--wrapper.pt-150 {
        padding: 60px 0;
    }

    .case-study-solution--wrapper .sec-heading h2 {
        font-size: 34px;
    }

    .case-study-testimonial--wrapper .testimonial-box {
        padding-top: 80px;
    }

    .case-study-testimonial--wrapper .testimonial-box p {
        font-size: 18px;
        margin-top: 28px;
    }

    .case-study-testimonial--wrapper .top-heading {
        padding: 10px 15px 11px 14px;
        font-size: 16px;
    }

    .case-study-testimonial--wrapper .top-heading u {
        width: 4px;
        height: 4px;
        top: 49%;
    }

    .testimonial-box svg {
        width: 70px;
    }

    .case-study-faq--wrapper .faq--wrapper {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .case-study-project--wrapper .pt-150 {
        padding-bottom: 40px;
        padding-top: 100px;
    }

    /* ============================================= Case Study Details Version 2 ============================================= */
    .case-study-img-with-text--wrapper {
        padding-top: 60px;
    }

    .case-study-img-with-text--wrapper .case-study-top-content {
        padding: 0 20px 45px;
    }

    .case-study-img-with-text--wrapper h1 br {
        display: none;
    }

    .case-study-img-with-text--wrapper h1 {
        font-size: 38px;
        letter-spacing: -0.76px;
    }

    .case-study-adriancrook-assoicates .case-study-img-with-text--wrapper h1 {
        max-width: 290px;
    }

    .case-study-img-with-text--wrapper .case-study-top-content span {
        margin-bottom: 20px;
    }

    .case-study-top-content ul li:nth-child(n+4) {
        display: none;
    }

    .case-study-img-with-text--wrapper ul {
        border-radius: 0 0 0 10px;
        padding: 0 0 5px 5px;
    }

    .case-study-top-content svg {
        width: 20px;
        height: auto;
    }

    .case-study-img-with-text--wrapper .left-top-corner {
        left: -20px;
    }

    .case-study-img-with-text--wrapper .right-bottom-corner {
        bottom: -20px;
    }

    .case-study-overview--wrapper {
        gap: 34px;
        padding: 40px 0 60px;
    }

    .case-study-img-with-text--wrapper ul {
        right: -1px;
        top: -1px;
    }

    .case-study-overview--wrapper>div {
        width: 100%;
    }

    .overview-left img {
        margin-bottom: 38px;
    }

    .overview-left p {
        font-size: 18px;
        line-height: 1.6;
    }

    .overview-left p:not(:first-of-type) {
        margin-top: 20px;
    }

    .overview-left .sec-heading span {
        margin-bottom: 17px;
    }

    .case-study-overview--wrapper .company-box--wrapper {
        padding: 40px 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 34px 20px;
    }

    .overview-data-box {
        width: calc(50% - 10px);
    }

    .overview-right .overview-data-box:not(:last-child) {
        margin-bottom: 0;
    }

    .challenge--wrapper {
        padding: 60px 0 43px;
    }

    .challenge--wrapper h2 {
        font-size: 34px;
        letter-spacing: -0.68px;
        margin-bottom: 18px;
    }

    .challenge--wrapper h2 span {
        display: inline;
        text-align: left;
        margin-top: 0;
    }

    .challenge--wrapper p {
        font-size: 18px;
        line-height: 1.6;
    }

    .solution-right {
        display: none;
    }

    .solution-left {
        width: 100%;
    }

    .case-study-solution--wrapper .solution-left .sec-heading h2 {
        font-size: 32px;
    }

    .case-study-solution--wrapper .solution-left .sec-heading p {
        margin-top: 15px;
    }

    .solution-left .case-study-solution-box--wrapper .case-study-solution-box:first-child {
        margin-top: 34px;
        padding-top: 40px;
    }

    .solution-left .case-study-solution-box h3 {
        font-size: 26px;
    }

    .solution-left .case-study-solution-box h3 {
        font-size: 26px;
        letter-spacing: -0.52px;
        line-height: 1.2;
        margin-top: 26px;
    }

    .solution-left .case-study-solution-box {
        margin-top: 34px;
    }

    .solution-left .row,
    .solution-left .img-with-text-col,
    .case-study-adriancrook-assoicates .solution-left .row {
        row-gap: 10px;
    }

    .solution-left .img-col,
    .solution-left .text-col {
        width: 100%;
    }

    .solution-left .text-col {
        padding: 40px 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 30px 20px;
    }

    .solution-left .text-col .counter-box:not(:last-child) {
        margin: 0;
    }

    .solution-left .counter-box {
        width: calc(50% - 10px);
    }

    .case-study-solution-box .text-col .counter-box p {
        font-size: 16px;
        line-height: 1.5;
    }

    .column-collage-grid,
    .column-collage-grid>div {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .column-collage-grid>div,
    .case-study-adriancrook-assoicates .collage-grid-one,
    .case-study-adriancrook-assoicates .collage-grid-second {
        width: 100%;
        flex-direction: unset;
    }

    .collage-grid-third-col {
        width: calc(50% - 5px);
    }

    .challenge--wrapper .topheading {
        font-size: 16px;
        margin-bottom: 20px;
        padding-left: 14px;
    }

    .challenge--wrapper .topheading:after {
        width: 4px;
        height: 4px;
    }

    .case-study-adriancrook-assoicates .solution-left .row {
        margin: 0 -5px;
    }

    .case-study-adriancrook-assoicates .solution-left .row>div {
        padding: 0 5px;
    }

    .case-study-adriancrook-assoicates .solution-left .sec-heading h2 br {
        display: none;
    }

    .collage-grid-one .collage-grid-one-right-col {
        width: calc(50.6% - 5px);
    }

    .collage-grid-one .collage-grid-one-left-col {
        width: calc(49.4% - 5px);
    }

    .case-study-adriancrook-assoicates .collage-grid-one .collage-grid-one-right-col,
    .case-study-adriancrook-assoicates .collage-grid-one .collage-grid-one-left-col {
        width: 100%;
    }

    .case-study-solution-box ul li {
        font-size: 18px;
        padding-left: 14px;
    }

    .case-study-solution-box ul {
        padding-left: 5px;
        margin-top: 20px;
    }

    /* ============================================= Blog Hub Page ============================================= */
    .blog-hub--wrapper .blog-box--wrapper {
        gap: 38px;
        margin-top: 10px;
    }

    .blog-hub--wrapper .blog-media,
    .blog-media,
    .blog--wrapper .blog-media {
        padding-top: 200px;
        border-radius: 20px;
        margin-bottom: 20px;
    }

    .blog-hub--wrapper .blog-box,
    .blog-box.layout-large {
        width: 100%;
    }

    #page_navigation {
        justify-content: center;
    }

    .insight--wrapper {
        padding: 100px 0;
    }

    .insight--wrapper .sec-heading h2 {
        font-size: 38px;
        letter-spacing: -0.76px;
        ;
        font-weight: 500;
        font-family: 'HelveticaNowDisplay-Medium';
        max-width: 250px;
    }

    .insight-box--wrapper {
        margin-top: 20px;
    }

    .insight-box--wrapper .insight-box:not(:last-child) {
        padding-bottom: 40px;
    }

    .insight-box {
        padding-top: 34px;
        gap: 30px;
        flex-direction: column;
    }

    .insight-heading {
        min-width: 100%;
    }

    .insight-box h3 {
        font-size: 24px;
        line-height: 1.2;
        letter-spacing: -0.48px;
        margin-bottom: 22px;
    }

    .insight-box p {
        font-size: 16px;
        max-width: 100%;
    }

    .case-study-filter--box h6 {
        display: none;
    }

    .case-study-top--wrapper {
        gap: 20px;
    }

    .insight-box .insight-heading span {
        font-size: 12px;
        font-family: 'HelveticaNowDisplay-Medium';
    }

    /* ============================================= Blog Page ============================================= */
    .main-blog-content {
        border-radius: 0 18px 0 0;
        padding: 20px 20px 0 0;
        max-width: 80%;
        margin-top: -90px;
    }

    .main-blog-content h1 {
        font-size: 30px;
        letter-spacing: -0.76px;
    }

    .main-blog-content span {
        font-size: 12px;
        margin-bottom: 17px;
    }

    .main-blog-content span svg {
        width: 12px;
        height: auto;
    }

    .main-blog--wrapper .blog-media {
        padding-top: 300px;
    }

    .main-blog-content .content-svg {
        width: 18px;
    }

    .main-blog--wrapper .content-svg.bottom-right-corner {
        right: -18px;
    }

    .main-blog--wrapper .content-svg.top-left-corner {
        top: -18px;
    }

    .main-blog-sec {
        margin: 60px 0 60px;
    }

    .blog--wrapper .blog-box--wrapper {
        gap: 40px;
    }

    .blog--wrapper .blog-box,
    .blog--wrapper .blog-box.layout-large {
        width: 100%;
    }

    .blog--wrapper .blog-media svg {
        bottom: 10px;
        right: 10px;
        width: 22px;
    }

    .blog--wrapper .blog-box h2 {
        margin-top: 12px;
    }

    .blog--wrapper .case-study--wrapper {
        padding-top: 40px;
    }

    /* ============================================= Article Page ============================================= */
    .article-content-right-col {
        display: none;
    }

    .article-content-left-col {
        width: 100%;
    }

    .article-media {
        padding-top: 461px;
        border-radius: 18px;
    }

    .article-hero-content .content-svg,
    .article-content-left-col .text-box .content-svg {
        width: 18px;
    }

    .article-hero-content .bottom-right-corner,
    .article-content-left-col .text-box .bottom-right-corner {
        top: -18px;
    }

    .article-hero-content .top-left-corner,
    .article-content-left-col .text-box .top-left-corner {
        left: -18px;
    }

    .article-hero-content {
        max-width: 86%;
        padding: 20px 0 0 20px;
    }

    .article-hero-content h1 {
        margin: 10px 0 0;
        font-family: 'HelveticaNowDisplay-Medium';
        font-size: 37px;
        letter-spacing: -0.76px;
        line-height: 1.15;
    }

    .article-hero-top-content span {
        letter-spacing: 0;
        font-size: 12px;
        gap: 10px;
    }

    .article-hero-top-content span:last-child {
        padding-left: 26px;
    }

    .article-hero-top-content span:last-child:after {
        left: 10px;
    }

    .article-hero-top-content span svg {
        width: 12px;
        height: auto;
    }

    .article-hero-section {
        margin: 50px 0 60px;
    }

    .back-blog-btn {
        font-size: 16px;
        letter-spacing: -0.32px;
        margin-bottom: 20px;
    }

    .article-content--wrapper {
        padding-top: 20px;
        padding-bottom: 60px;
    }

    .article-content-left-col p,
    .article-main--wrapper .article-content-left-col div:not(.article-content) p {
        font-size: 18px;
    }

    .article-content-left-col div p:last-of-type {
        margin-top: 10px;
    }

    .article-content-left-col>div:not(:last-child) {
        padding-bottom: 60px;
    }

    .article-content-left-col h3 {
        font-size: 22px;
        letter-spacing: -0.44px;
    }

    .article-content-left-col h4 {
        font-size: 32px;
        font-family: 'HelveticaNowDisplay-Medium';
        letter-spacing: -0.64px;
    }

    .article-content-left-col h4 {
        font-size: 22px;
        letter-spacing: -0.44px;
        margin: 10px 0 0;
    }

    .article-content-left-col table {
        margin-top: 20px;
    }

    .article-content-left-col table th {
        padding: 17px 20px;
        font-size: 14px;
    }

    .article-content-left-col table td {
        font-size: 14px;
        padding: 18px 20px;
    }

    .article-content-left-col ul li {
        font-size: 18px;
    }

    .article-content-left-col ul {
        margin-top: 10px;
    }

    .article-content-left-col ul li:after {
        border-radius: 0;
        top: 11px;
    }

    .article-img-box {
        gap: 10px;
        margin-top: 20px;
        flex-direction: column;
    }

    .article-img-box .article-content-img {
        width: 100%;
        flex: unset;
        display: block;
        border-radius: 20px;
    }

    .article-img-box .article-content-img img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .article-img-box .article-content-img:first-child {
        padding-top: 380px;
        position: relative;
    }

    .article-img-box .article-content-img:last-child {
        padding-top: 290px;
        position: relative;
    }

    .article-content-left-col blockquote {
        font-size: 30px;
        margin-top: 68px;
    }

    #faq h2 {
        margin-bottom: 23px;
    }

    .article-info {
        gap: 20px;
        padding-top: 20px;
        align-items: start;
        flex-direction: column;
    }

    .author-box {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        font-size: 30px;
        letter-spacing: -0.96px;
    }

    .author-info span {
        display: none;
    }

    .author-info h3 {
        font-size: 18px;
        letter-spacing: -0.36px;
        margin: 0 0 6px;
    }

    .article-content-left-col .article-info-box .author-info p {
        font-size: 14px;
    }

    .article-content-left-col .article-info .article-info-box+p {
        font-size: 16px;
        line-height: 1.4;
        font-family: 'HelveticaNowDisplay-Light';
    }

    #final-thoughts h4 {
        margin-bottom: 10px;
    }

    .related-article--wrapper {
        padding: 0;
    }

    .related-article--wrapper .our-blog--wrapper {
        padding: 60px 0;
    }

    .article-main--wrapper .article-content-left-col h2 {
        font-size: 32px;
        line-height: 1.10;
        letter-spacing: -0.64px;
    }

    .article-content-left-col .shape-box h4 {
        font-size: 22px;
    }

    article .article-content-left-col .shape-box p {
        font-size: 18px;
        margin-top: 0;
    }

    .quote-content span {
        font-size: 18px;
        margin-top: 19px;
    }

    .article-content-left-col .img-box {
        padding-top: 420px;
        border-radius: 20px;
    }

    .article-content-left-col .img-with-text {
        margin-top: 73px;
    }

    article .article-content-left-col .img-with-text p {
        font-size: 16px;
        line-height: 1.87;
        margin: 0;
    }

    .article-content-left-col .img-with-text .text-box {
        max-width: 86%;
    }

    .article-main--wrapper .article-content-left-col table td {
        font-size: 14px;
    }

    article .article-content-left-col .img-with-text+p {
        margin-top: 30px;
    }

    .article-img {
        margin-top: 80px;
    }

    .article-main--wrapper .article-content-left-col div:not(.article-content) .article-img p {
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .article-img img {
        border-radius: 20px;
    }

    .article-main--wrapper .article-content-left-col div:not(.article-content)#ux-action .article-img p {
        margin: 16px 0;
    }

    .article-design-growth .article-img {
        margin-top: 20px;
    }

    /* ============================================= Stress-Free Website Redesign Checklist ============================================= */
    .article-redesign-hero--wrapper h1 {
        font-size: 43px;
        letter-spacing: -0.96px;
        margin-bottom: 20px;
        line-height: 1.1;
    }

    .article-redesign-hero--wrapper {
        padding: 60px 0 40px;
        margin-bottom: 97px;
    }

    .article-redesign-hero--wrapper img {
        border-radius: 20px;
        margin-top: 40px;
        width: 100%;
        margin-bottom: -137px;
    }

    .article-intro--wrapper {
        padding: 80px 0;
    }

    .article-intro--wrapper p {
        font-size: 18px;
    }

    .article-intro--wrapper p:first-child {
        padding-right: 40px;
        margin-bottom: 20px;
    }

    .article-intro--wrapper p:nth-of-type(2) {
        padding-left: 40px;
    }

    .article-intro--wrapper img {
        border-radius: 20px;
        margin-top: 29px;
    }

    .need-redesign--wrapper h2 {
        max-width: 250px;
    }

    .redesign-checklist-box {
        gap: 32px;
        margin-top: 22px;
        flex-direction: column;
    }

    .redesign-checklist-box p {
        font-size: 18px;
        max-width: 100%;
        position: relative;
        top: 0;
    }

    .icon-with-text li:not(:last-child) {
        margin-bottom: 20px;
    }

    .icon-with-text li {
        font-size: 18px;
        font-family: 'HelveticaNowDisplay-Regular';
        padding-left: 24px;
        line-height: 1.4;
    }

    .icon-with-text li:after {
        width: 12px;
        height: 12px;
        top: 6px;
    }

    .redesign-img-box {
        gap: 28px;
        margin: 28px 0 -2px;
    }

    .redesign-img-left,
    .redesign-img-right {
        width: 100%;
    }

    .redesign-img-box img {
        border-radius: 20px;
    }

    .redesign-img-box p {
        margin: 26px 0 0;
        font-size: 18px;
        line-height: 1.4;
    }

    .sanity-checkbox {
        border-radius: 20px;
        padding: 40px 20px;
        margin-top: 30px;
    }

    .sanity-checkbox h3 {
        font-size: 24px;
        letter-spacing: -0.48px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .sanity-checkbox p {
        font-size: 18px;
        line-height: 1.4;
    }

    .sanity-checkbox ul,
    .plan-work--wrapper .icon-with-text {
        column-count: 1;
        column-gap: 0;
        margin-top: 30px;
    }

    .need-redesign-sec.bg-black.pt-150 {
        padding: 100px 0;
    }

    .redesign-paysoff--wrapper .sec-heading {
        margin-bottom: 43px;
    }

    .payoff-left-col {
        position: relative;
        top: 0;
        width: 100%;
    }

    .payoff-right-col {
        width: 100%;
    }

    .redesign-payoff-columns {
        gap: 10px;
    }

    .payoff-left-col h3 {
        font-size: 22px;
    }

    .payoff-right-col p {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .payoff-right-col a.arrow-btn {
        margin-bottom: 20px;
    }

    .payoff-right-col img {
        border-radius: 20px;
    }

    .plan-work-heading {
        padding: 30px 30px 30px 0;
        max-width: 82%;
        border-radius: 0 20px 0 0;
        bottom: -1px;
        left: -1px;
    }

    .plan-work-img,
    .compounds-updates--wrapper img {
        border-radius: 20px;
    }

    .plan-work-heading svg {
        width: 20px;
    }

    .plan-work-heading .top-left-corner {
        top: -20px;
    }

    .plan-work-heading .bottom-right-corner {
        right: -20px;
    }

    .plan-work--wrapper p,
    .effective-design-columns p,
    .bulit-box p {
        font-size: 18px;
        line-height: 1.6;
    }

    .plan-wrok-desc {
        gap: 20px;
        margin-top: 40px;
        flex-direction: column;
    }

    .plan-work--wrapper p:first-child {
        max-width: 100%;
    }

    .plan-work--wrapper p:last-child {
        flex: auto
    }

    .effective-design-columns {
        margin-top: 46px;
    }

    .effective-design-columns>div {
        width: 100%;
    }

    .effective-design-columns img {
        border-radius: 20px;
    }

    .effective-design-left-col img {
        margin-top: 0;
        margin-bottom: 30px;
    }

    .effective-design-left-col ul {
        margin: 20px 0;
    }

    .effective-design-right-col {
        padding-top: 0;
    }

    .effective-design-right-col h3 {
        font-size: 24px;
        margin: 30px 0 30px;
    }

    .what-bulit--wrapper h2 {
        max-width: 300px;
    }

    .what-bulit--wrapper .row {
        margin: 44px -25px 00;
    }

    .what-bulit--wrapper .col-4 {
        width: 100%;
    }

    .bulit-box h3 {
        font-size: 24px;
        letter-spacing: -0.35px;
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .what-bulit--wrapper .row .col-4:nth-child(2),
    .what-bulit--wrapper .row .col-4:last-child {
        padding-top: 32px;
    }

    .design-launch--wrapper {
        gap: 40px;
        flex-direction: column-reverse;
    }

    .design-launch--wrapper>div {
        width: 100%;
    }

    .launch-left-col h2 {
        max-width: 230px;
    }

    .launch-left-col p {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .compounds-updates--wrapper .sec-heading+p {
        font-size: 18px;
        line-height: 1.4;
        margin: 35px 0 43px;
    }

    .compounds-updates--wrapper .article-info.article-content {
        margin-top: 50px;
        padding-top: 50px;
    }

    .compounds-updates--wrapper .article-info .article-info-box+p {
        font-size: 16px;
        line-height: 1.4;
        max-width: 100%;
    }

    .checklist-blog--wrapper {
        padding: 100px 0 80px;
    }

    /* ============================================= Quick Local SEO Wins ============================================= */
    .article-seo-content {
        padding: 40px 20px;
    }

    .article-seo-content h1 {
        font-size: 38px;
        line-height: 1.15;
        letter-spacing: -0.76px;
        max-width: 750px;
        margin: 18px 0 21px;
    }

    .article-seo-img:after {
        border-radius: 14px;
    }

    .article-seo-img img {
        object-position: right;
    }

    .article-seo-img {
        padding-bottom: 448px;
        border-radius: 14px;
    }

    .quick-seo-intro--wrapper p {
        font-size: 20px;
        margin-bottom: 25px;
    }

    .quick-seo-intro--wrapper h2 {
        font-size: 28px;
        letter-spacing: -0.76px;
        line-height: 1.20;
        padding-top: 21px;
    }

    .meta-desc--wrapper .sec-heading p {
        font-size: 20px;
        margin-top: 17px;
    }

    .meta-desc--wrapper .sec-heading {
        margin-bottom: 50px;
    }

    .key-pages-intro {
        gap: 25px;
        margin-top: 35px;
        margin-bottom: 42px;
        flex-direction: column;
    }

    .key-pages-intro>* {
        width: 100%;
    }

    .key-pages-intro p {
        font-size: 18px;
        line-height: 1.4;
    }

    .business-profile-sec p,
    .lp-regions--wrapper p {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .social-image--wrapper img {
        border-radius: 14px;
    }

    .social-image--wrapper ul.icon-with-text {
        column-count: 1;
        margin-top: 20px;
    }

    .social-image--wrapper h3 {
        font-size: 20px;
        margin-top: 51px;
    }

    .business-profile-sec .sec-heading {
        margin-bottom: 22px;
    }

    .business-profile-sec img {
        margin: 28px 0;
        border-radius: 14px;
    }

    .site-navigation--wrapper h2 {
        max-width: 218px;
    }

    .site-navigation--wrapper .row {
        margin: 50px -20px 0;
    }

    .site-navigation--wrapper .col-4 {
        padding: 0 20px;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
    }

    .site-navigation--wrapper .row .col-4:nth-child(2),
    .site-navigation--wrapper .row .col-4:last-child {
        padding-top: 50px;
    }

    .site-navigation--wrapper p {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 0;
        margin-top: 24px;
    }

    .bg-black.pt-150.site-navigation-sec,
    .lp-regions-sec.bg-black.pt-150 {
        padding: 100px 0;
    }

    .lp-service--wrapper .launch-left-col h2 {
        max-width: 100%;
    }

    .lp-service--wrapper .design-launch--wrapper {
        flex-direction: column;
    }

    .lp-regions--wrapper .sec-heading {
        margin-bottom: 39px;
    }

    .regions-box--wrapper {
        gap: 40px;
        margin-top: 43px;
        margin-bottom: 46px;
    }

    .regions-left-box,
    .regions-right-box {
        width: 100%;
    }

    .lp-regions--wrapper .regions-left-box p {
        margin: 20px 0 0;
    }

    .lp-regions--wrapper .article-info {
        margin-top: 50px;
        padding-top: 50px;
    }

    .lp-regions--wrapper .article-info .article-info-box+p {
        font-size: 16px;
        line-height: 1.4;
        max-width: 100%;
    }

    .sitemap-sec.business-profile-sec img {
        margin-bottom: 0;
    }

    /* ============================================= 404 ============================================= */
    .not-found-content h1 {
        font-size: 44px;
        letter-spacing: -.48px;
    }
    .not-found-content p {
        font-size: 18px;
        margin-bottom: 27px;
        margin-top: 10px;
        line-height: 1.6;
    }
    .not-found-main--wrapper {
        padding: 170px 0 150px;
        overflow: hidden;
    }
    .not-found-main--wrapper img {
        max-width: 140%;
        top: 40%;
    }
}

@media (min-width:375px) and (max-width:420px) {

    /* hero Banner */
    .hero-heading--wrapper h1 {
        font-size: 29px;
        max-width: 240px;
    }

    .newsletter-col-right button.def-btn {
        gap: 10px;
    }
}

@media screen and (max-width:991px) {
    .navbar-right {
        display: none;
    }

    .navbar .container {
        position: relative;
    }

    span.close-btn {
        border-radius: 50%;
        background: rgba(14, 15, 17, 0.50);
        width: 30px;
        min-width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navabr-logo-col {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 80px;
    }

    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px 20px;
        z-index: 5;
        background: rgba(255, 255, 255, 0.20);
        backdrop-filter: blur(15px);
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10);
        height: 0;
        display: block !important;
        opacity: 0;
        transition: all 0.4s ease-in-out;
        visibility: hidden;
    }

    .navbar-collapse.collapse.show {
        opacity: 1;
        visibility: visible;
        height: 100%;
    }

    .navbar-box .sec-heading span {
        margin-bottom: 45px;
    }

    .navbar .navbar-collapse .nav-quote-btn {
        display: flex;
        width: 100%;
        justify-content: space-between;
        font-size: 16px;
        padding: 10px 10px 10px 15px;
        margin-top: 40px;
    }

    .navbar-box {
        padding: 20px 20px 40px;
        background: radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.60) 0%, #F7F7F7 100%);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(37.5px);
        height: 100%;
        overflow-y: auto;
        border-radius: 12px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        font-size: 38px;
        font-family: 'Helvetica Now Display';
        letter-spacing: -0.76px;
        line-height: 1.4;
        padding: 0;
        display: flex;
    }

    .navbar-expand-lg .navbar-nav {
        gap: 0;
        margin: 0 !important;
    }

    .navbar-expand-lg {
        padding: 20px 0;
    }

    .navbar-nav li.nav-item:not(:last-child) {
        margin-bottom: 6px;
    }

    .navbar-expand-lg .navbar-nav .nav-link span::after,
    .navbar-expand-lg.sticky-header .navbar-nav .nav-link span::after {
        bottom: 0;
    }

    .megamenu--wrapper .back-menu {
        display: flex;
        align-items: center;
        color: #3f3f3f;
        font-size: 16px;
        letter-spacing: -0.32px;
        line-height: 1;
        font-family: 'HelveticaNowDisplay-Medium';
        gap: 6px;
    }

    .faq-left-col {
        display: none;
    }

    .faq-menu li:not(:last-child) {
        margin-bottom: 0;
    }

    ul.faq-menu {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin-bottom: 54px;
        padding-top: 10px;
        padding-bottom: 10px;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
        margin-top: 20px;
    }

    .faq-right-col>div {
        scroll-margin-top: 160px;
    }

    ul.faq-menu::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
    }

    ul.faq-menu::-webkit-scrollbar {
        height: 2px;
        background-color: #F5F5F5;
    }

    ul.faq-menu::-webkit-scrollbar-thumb {
        background-color: var(--main-color);
    }

    .faq-search-field input:focus {
        min-width: 100%;
    }

    .faq-menu a {
        color: #606060;
        font-size: 16px;
        line-height: 1;
        letter-spacing: -0.32px;
        border-radius: 60px;
        border: 1px solid #606060;
        padding: 8px 10px;
    }

    .faq-menu a.active {
        background-color: var(--main-color);
        color: var(--white-color);
        border-color: var(--main-color);
    }

    .search-chips .search-chip {
        font-size: 14px;
        padding: 5px 10px;
        gap: 5px;
    }

    .active-search .clear-all {
        font-size: 12px;
        padding: 3px 12px;
    }

    /* Megamenu */
    .megamenu--wrapper {
        opacity: 1;
        transform: scale(1);
        border: none;
        margin: 0;
        display: none;
        position: absolute;
        width: 100%;
        height: auto;
        top: 100px;
        left: 0;
        padding: 30px 20px 40px;
        background: radial-gradient(100% 100% at 50% 0%, rgba(255, 255, 255, 0.60) 0%, #F7F7F7 100%);
        box-shadow: none;
        backdrop-filter: blur(0);
        z-index: 2;
        border-radius: 0;
        overflow-y: auto;
    }

    .nav-item.megamenu--item span::after {
        display: none;
    }

    .megamenu--wrapper h3.mobile_show {
        font-size: 38px;
        font-family: 'Helvetica Now Display';
        letter-spacing: -0.76px;
        line-height: 1;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 14px;
        margin: -13px 0 0;
    }

    .megamenu--wrapper .container.desktop_show {
        display: none;
    }

    .megamenu--wrapper .mobile_show {
        display: block;
        width: 100%;
    }

    .megamenu--wrapper .nav-quote-btn svg rect {
        fill: var(--white-color);
    }

    .navbar .navbar-collapse .megamenu--wrapper .nav-quote-btn {
        margin-top: 20px;
    }

    .nav-item.megamenu--item.open .megamenu--wrapper {
        display: block;
    }

    .nav-item.megamenu--item.open .plus {
        display: none;
    }

    .megamenu--wrapper .container {
        max-width: 100%;
        padding: 0;
        gap: 36px;
        flex-wrap: wrap;
    }

    .megamenu-col {
        width: 100%;
    }

    .megamenu-col h6 {
        color: #3F3F3F;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
        font-family: 'HelveticaNowDisplay-Medium';
        border-bottom: 1px solid rgba(76, 126, 240, 0.50);
        padding-bottom: 10px;
        margin-bottom: 27px;
    }

    .menu-open {
        overflow: hidden;
    }

    .sticky-header.navbar-expand-lg .navbar-nav .nav-link {
        padding: 0;
    }

    .megamenu-col li a {
        font-size: 16px;
        line-height: 1.2;
        letter-spacing: -0.32px;
    }

    .megamenu-col ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: repeat(var(--mm-rows, 3), max-content);
        column-gap: 30px;
        row-gap: 17px;
        --mm-rows: 3;
    }

    .megamenu--item .nav-link svg {
        position: relative;
        top: 4px;
        left: 10px;
    }

    .megamenu-content-box,
    .megamenu-col li a .desktop_show {
        display: none;
    }

    .megamenu-col ul li:not(:last-child) {
        margin-bottom: 0;
    }

    .megamenu-col ul li.mobile_show a {
        color: var(--main-color);
    }

    .menu-open .navbar-nav>li .nav-link,
    .menu-open .navbar-nav li.nav-item.mob-btn,
    .menu-open .navbar-box .sec-heading {
        opacity: 0;
    }
}

@media (min-width:375px) and (max-width:428px) {

    .newsletter-col-right form input,
    .newsletter-field {
        min-width: 100%;
    }

    .newsletter-col-right form {
        justify-content: center;
    }

    /* Megamenu */
    .megamenu-col ul {
        gap: 20px;
    }

    .megamenu-col li a {
        gap: 6px;
    }

    .megamenu-col li a svg {
        width: 6px;
        height: 6px;
    }

    .megamenu-col ul {
        gap: 10px;
    }

    .not-found-main--wrapper img {
        max-width: 150%;
        top: 33%;
    }

}

@media screen and (max-width:374px) {
    .footer-info a {
        font-size: 14px;
        gap: 18px;
    }

    .def-btn.bg-wht {
        padding: 13px 25px;
    }

    /* Hero Banner */
    .hero-heading--wrapper h1 {
        font-size: 27px;
        letter-spacing: -1px;
        line-height: 1.10;
        max-width: 190px;
    }

    .hero-heading--wrapper.sec-heading span {
        margin-bottom: 9px;
        font-size: 14px;
    }

    .blog-slider-right-col .blog-top--wrapper {
        gap: 10px;
    }

    .blog-slider-right-col .blog-box span {
        font-size: 11px;
    }

    .newsletter-col-right form input,
    .newsletter-field {
        min-width: 100%;
    }

    .newsletter-col-right button.def-btn {
        width: 100%;
    }

    /* Megamenu */
    .megamenu-col ul {
        column-count: 1;
    }
    /* ============================================= 404 ============================================= */
    .not-found-content h1 {
        font-size: 41px;
    }
    .not-found-main--wrapper img {
        max-width: 150%;
        top: 33%;
    }
}

@media (min-width:600px) and (max-width:767px) {
    .not-found-main--wrapper img {
        max-width: 100%;
    }
}

@media screen and (min-width:768px) {

    .mobile_show,
    .footer-menu h3 svg,
    .newsletter-col-left h2 br,
    .work-box .arrow-btn,
    .article-main--wrapper .article-content-left-col h2 br {
        display: none;
    }
}

@media screen and (min-width:992px) {

    .navbar-nav .mob-btn,
    .work-left-col .sec-heading,
    .service-info-col a.def-btn,
    .about-hero-right-col .def-btn,
    .navabr-logo-col,
    .navbar-box .sec-heading,
    .faq-right-col .faq-menu {
        display: none;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .navbar-brand img {
        max-width: 190px;
    }

    /* Hero Banner */
    .hero-heading--wrapper {
        padding: 0px 30px 10px 0px;
        width: 60%;
    }

    .hero-heading--wrapper h1 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .hero-heading--wrapper::after,
    .hero-heading--wrapper::before {
        display: none;
    }

    .hero-content--wrapper {
        flex-direction: column-reverse;
        padding: 0 30px;
        gap: 20px;
    }

    .hero-desc--wrapper {
        width: 100%;
        border-radius: 28px;
        padding: 40px;
        margin-top: -144px;
        min-height: auto;
    }

    .hero-desc--wrapper p {
        font-size: 22px;
        max-width: 100%;
        margin-bottom: 26px;
        min-height: auto;
    }

    .hero-card--wrapper {
        width: 100%;
        gap: 20px;
        margin-top: 0;
    }

    .hero-card a {
        padding: 20px;
        min-height: 100px;
        font-size: 30px;
    }

    .hero-banner--wrapper {
        padding: 60px 0 0;
    }

    /* footer */
    .footer--wrapper {
        padding: 68px 40px 30px 40px;
        margin-bottom: 40px;
    }

    .footer-info h2 {
        font-size: 66px;
        letter-spacing: -1.58px;
    }

    .footer-info a {
        margin-top: 22px;
        font-size: 18px;
    }

    .footer-menu--wrapper {
        margin-top: 45px;
        justify-content: space-between;
        width: 100%;
        gap: 60px;
    }

    .footer-menu--wrapper h3 {
        margin-bottom: 25px;
    }

    .footer-menu--wrapper a,
    .footer-menu--wrapper p {
        font-size: 17px;
    }

    .footer-bottom {
        padding-top: 30px;
        margin-top: 30px;
    }

    .back-to-top {
        font-size: 17px;
        gap: 13px;
    }

    .back-to-top svg {
        width: 12px;
        height: auto;
        position: relative;
        top: -1px;
    }

    /* Mission */
    .mission-sec {
        padding: 120px 0;
        margin-top: 60px;
    }

    .mission--wrapper {
        gap: 30px;
    }

    .mission--wrapper .sec-heading span {
        margin: 0;
    }

    .sec-heading span {
        font-size: 16px;
        margin-bottom: 26px;
    }

    .mission-content p {
        font-size: 20px;
        letter-spacing: 0;
        line-height: 1.8;
        text-indent: 0;
    }

    .mission-content a {
        margin-top: 40px;
    }

    /* Our Work */
    .work-right-col .sec-heading,
    .work-left-col .explor-btn {
        display: none;
    }

    .project--wrapper {
        gap: 0;
    }

    .project--wrapper>div {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        column-gap: 30px;
    }

    .work-box {
        margin-top: 30px;
        width: calc(50% - 15px);
    }

    .project--wrapper .work-box {
        width: 100%;
    }

    .project--wrapper .work-media {
        padding: 0;
        min-height: 380px;
    }

    .work-left-col .sec-heading {
        width: 100%;
    }

    .sec-heading.txt-white h2 {
        color: #fff;
        max-width: 270px;
    }

    .sec-heading h2 {
        font-size: 36px;
    }

    .sec-heading p {
        font-size: 20px;
        margin-top: 20px;
    }

    .work-media {
        border-radius: 18px;
        min-height: 400px;
    }

    .work-info,
    .case-study--wrapper .work-info {
        padding: 30px 20px 30px 20px;
    }

    .work-info h3 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .work-info p {
        font-size: 16px;
        letter-spacing: -0.15px;
        line-height: 1.4;
    }

    .work-tag li {
        padding: 7px 13px;
        font-size: 13px;
    }

    .work--wrapper {
        padding: 80px 0;
    }

    .explor-btn {
        margin-top: 52px;
    }

    .explor-btn h4 {
        font-size: 34px;
        letter-spacing: -1px;
        margin-bottom: 20px;
    }

    .def-btn {
        padding: 7px 15px;
        font-size: 16px;
        letter-spacing: -0.15px;
        gap: 20px;
    }

    .def-btn span {
        width: 43px;
        height: 26px;
    }

    .arrow-btn {
        font-size: 17px;
    }

    /* Our Service */
    .service--wrapper {
        gap: 60px;
        padding: 80px 0;
    }

    .service-heading-col {
        width: 100%;
        position: relative;
        top: 0;
    }

    .service-info-col {
        width: 100%;
    }

    .service-heading-col .sec-heading span {
        margin-bottom: 25px;
    }

    .service-heading-col p {
        font-size: 20px;
        max-width: 100%;
        margin: 20px 0 0;
    }

    .service-heading-col a.def-btn {
        display: none;
    }

    .service-info-col .service-accordian:not(:last-child) {
        margin-bottom: 40px;
    }

    .service-heading h3 {
        font-size: 30px;
    }

    .service-heading h3 sup {
        font-size: 18px;
        top: -11px;
    }

    .service-icon {
        border-radius: 7px;
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .service-icon svg {
        width: 14px;
        height: auto;
    }

    .service-info li {
        font-size: 20px;
        padding-left: 34px;
        margin-bottom: 25px;
    }

    .service-info a {
        margin-top: 40px;
    }

    .service-info li:after {
        top: 2px;
    }

    .service-info li:before {
        top: 4px;
    }

    .service-inner-body {
        padding-top: 10px;
        padding-bottom: 38px;
    }

    .service-info-col a.def-btn {
        margin: 50px auto 0;
    }

    /* About */
    .about-heading {
        left: 0;
        max-width: 100%;
        min-width: 100%;
        width: 100%;
        padding-left: 0;
        padding-bottom: 30px;
        margin-bottom: 0;
    }

    .about-img-col {
        width: 100%;
        padding-bottom: 60%;
        position: relative;
        border-radius: 20px;
        overflow: hidden;
    }

    .about-img-col img {
        border-radius: 0;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        left: 0;
    }

    .about-info-col {
        width: 100%;
    }

    .about--wrapper {
        padding: 80px 0;
    }

    .about-heading span {
        font-size: 18px;
        top: 11px;
        left: 1px;
    }

    .about-heading h2 {
        font-size: 36px;
        letter-spacing: -1px;
        line-height: 1.25;
        text-indent: 283px;
    }

    .about-info-col p:not(:last-child) {
        margin-bottom: 25px;
    }

    .about-info-col p {
        font-size: 20px;
        letter-spacing: 0;
        line-height: 1.41;
    }

    .about-info--wrapepr {
        gap: 50px;
    }

    /* Our Blog */
    .our-blog--wrapper {
        padding: 80px 0;
    }

    .blog-box--wrapper {
        gap: 30px;
        justify-content: center;
    }

    .blog-box {
        width: calc(50% - 15px);
    }

    .blog-box--wrapper .blog-box:first-child .blog-img {
        padding-bottom: 71.63%;
    }

    .blog-img {
        border-radius: 20px;
        margin-bottom: 20px;
    }

    .blog-box h2 {
        font-size: 26px;
        margin: 15px 0 0;
    }

    .blog-box p {
        font-size: 18px;
    }

    /* CTA Slider */
    .cta-slider p {
        font-size: 64px;
        letter-spacing: -3.02px;
    }

    .cta-slider p svg {
        width: 30px;
        height: auto;
        margin-left: 20px;
    }

    /* ================================= About Page ================================= */

    .about-hero-banner--wrapper {
        gap: 40px;
        flex-direction: column-reverse;
        padding-bottom: 40px;
    }

    .about-hero-left-col,
    .about-hero-right-col {
        width: 100%;
    }

    .about-hero-right-col a.def-btn {
        margin: 0 auto;
    }

    .about-hero-left-col h1 {
        font-size: 44px;
        margin-top: 0;
        margin-bottom: 30px;
    }

    .about-content-box {
        padding: 30px;
    }

    .about-content-box p:not(:last-child) {
        margin-bottom: 26px;
    }

    .about-content-box p {
        font-size: 18px;
    }

    .about-hero-right-col img {
        width: 100%;
    }

    .stats--wrapper {
        padding: 60px 0 100px 0;
    }

    .stats--wrapper p {
        font-size: 20px;
        padding-bottom: 22px;
        margin-bottom: 22px;
    }

    .stats--wrapper h2 {
        font-size: 24px;
    }

    .stats--wrapper .col-4 {
        min-height: 280px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .stats--wrapper .col-4:first-child {
        padding-left: 0;
    }

    .stats--wrapper .col-4:last-child {
        padding-right: 0;
    }

    .stats--wrapper .ref-rate {
        padding-bottom: 20px;
    }

    .col-4.coffee-col {
        margin-bottom: -25px;
    }

    .team-heading--wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .team-heading--wrapper p {
        font-size: 20px;
        max-width: 100%;
    }

    .team-slider {
        margin: 37px 0 60px;
    }

    .team-box img {
        border-radius: 12px;
    }

    .team-member-info h6 {
        font-size: 20px;
        letter-spacing: -0.35px;
        margin-bottom: 10px;
    }

    .team-member-info span {
        font-size: 14px;
        letter-spacing: 0;
    }

    .team-member-info {
        margin-top: 20px;
    }

    .our-team--wrapper {
        padding: 50px 0px 80px 0px;
        overflow: hidden;
    }

    .team-heading--wrapper h2 {
        max-width: 385px;
    }

    .mission--wrapper.about-content--wrapper {
        padding: 80px 0;
    }

    .pt-150.client--wrapper {
        padding: 50px 0 80px;
    }

    .client--wrapper .sec-heading h2 {
        font-size: 36px;
        letter-spacing: -1.04px;
        text-indent: 228px;
        margin-top: 0;
    }

    .client-logo--wrapper {
        gap: 15px;
        margin: 30px 0 50px;
    }

    .logo-box {
        width: calc(20% - 15px);
        border-radius: 14px;
        padding: 15px 10px;
    }

    .full-width-col .work-box,
    .our-project--wrapper .work-box {
        width: 100%;
    }

    .our-project--wrapper .col-12 .work-media {
        min-height: 340px;
        padding: 0;
    }

    .our-project--wrapper .col-12 .work-info h3 {
        margin-bottom: 15px;
    }

    .our-project--wrapper .col-12 .work-info p {
        font-size: 18px;
    }

    .our-project--wrapper .col-6 {
        padding: 0 15px;
    }

    .our-project--wrapper .row {
        margin: 0 -15px 0;
    }

    .pt-150 {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .project-heading--wrapper {
        margin-bottom: 50px;
    }

    .story-content-box {
        border-radius: 16px;
        padding: 40px 20px;
    }

    .story-content-box p {
        font-size: 16px;
        letter-spacing: -0.35px;
        line-height: 1.6;
        margin-top: 25px;
    }

    .story-info {
        margin-top: 50px;
    }

    .client-info h3 {
        font-size: 20px;
    }

    .client-info span {
        font-size: 16px;
    }

    .company-logo {
        width: 50px;
        height: 50px;
        font-size: 32px;
    }

    .story-slider--wrapper {
        flex-direction: column;
        gap: 50px;
    }

    .story-slider-pagination .swiper-arrow {
        border-radius: 6px;
        width: 38px;
        height: 38px;
    }

    .story-slider-pagination .swiper-arrow svg {
        width: 6px;
    }

    .story-left-col {
        width: 100%;
        flex-direction: row;
        gap: 40px;
        justify-content: space-between;
    }

    .story-slider--wrapper .story-slider {
        width: 100%;
    }

    .about-cta--wrapper {
        padding: 80px 40px;
        border-radius: 0px 0px 30px 30px;
        margin-bottom: 60px;
    }

    .about-cta--wrapper h2 {
        font-size: 48px;
        letter-spacing: -1.52px;
    }

    .about-cta--wrapper p {
        font-size: 20px;
        max-width: 640px;
        margin: 26px auto 30px;
    }

    .heading-with-text.sec-heading span {
        top: 14px;
    }

    /* ============================================= Services Page ============================================= */
    .service-hero-banner--wrapper {
        border-radius: 20px;
        padding: 90px 40px 93px 40px;
        margin: 30px 0;
    }

    .service-hero-banner--wrapper span {
        font-size: 16px;
        margin-bottom: 18px;
        padding-left: 23px;
    }

    .service-hero-banner--wrapper h1 {
        font-size: 48px;
    }

    .service-heading--wrapper {
        gap: 50px;
    }

    .service-heading--wrapper h2 {
        font-size: 40px;
        letter-spacing: -0.78px;
    }

    .service-heading--wrapper p {
        font-size: 20px;
    }

    .services-detail--wrapper {
        padding: 80px 0;
    }

    .service-card--wrapper {
        gap: 20px;
        margin-top: 47px;
    }

    .service-card,
    .service-card-detail {
        width: calc(50% - 10px);
        border-radius: 10px;
        padding: 30px 20px;
    }

    .service-card h3 {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .service-card p {
        font-size: 16px;
        margin-bottom: 30px;
    }

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

    .service-card-detail p {
        font-size: 17px;
        margin: 10px 0 0;
    }

    .service-card-detail ul li:not(:last-child) {
        margin-bottom: 12px;
    }

    .service-card-detail li {
        font-size: 16px;
        padding-left: 26px;
    }

    .service-card-detail li:before {
        width: 14px;
        height: 14px;
        top: 4px;
    }

    .service-card-detail ul {
        margin: 22px 0 32px;
    }

    .service-card h3 sup {
        font-size: 18px;
        top: -9px;
    }

    .industry-tools--wrapper h2 {
        font-size: 36px;
        letter-spacing: -0.36px;
        margin-bottom: 40px;
    }

    .tools-box img {
        margin: 0 auto;
        max-height: 50px;
    }

    .tools-box {
        border-radius: 14px;
        padding: 15px;
    }

    .industry-tools--wrapper a.def-btn {
        margin-top: 40px;
    }

    .blog-slider--wrapper {
        gap: 40px;
        padding: 80px 0;
    }

    .blog-slider-left-col {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;
    }

    .blog-slider-right-col {
        width: 100%;
    }

    /* ============================================= Branding Services Page ============================================= */
    .service-hero-intro-banner--wrapper {
        border-radius: 30px;
        padding: 50px 30px;
        gap: 30px;
    }

    .hero-left-col {
        width: calc(53.4% - 15px);
    }

    .hero-right-col {
        width: calc(46.6% - 15px);
    }

    .hero-left-col h1 {
        font-size: 35px;
        margin-bottom: 20px;
    }

    .hero-left-col p {
        font-size: 18px;
        line-height: 1.6;
    }

    .service-hero-intro-banner--wrapper span {
        padding: 8px 20px 12px 22px;
        font-size: 16px;
    }

    .service-intro--wrapper {
        padding: 50px 0 90px 0;
        gap: 0;
        flex-direction: column;
    }

    .intro-content p:first-child {
        text-indent: 0;
    }

    .intro-content p:not(:last-of-type) {
        margin-bottom: 24px;
    }

    .intro-content p {
        font-size: 20px;
    }

    .service-process--wrapper {
        gap: 40px;
    }

    .process-left-col {
        width: calc(47.1% - 20px);
    }

    .process-right-col {
        width: calc(52.9% - 20px);
    }

    .process-left-col h2 {
        font-size: 38px;
        letter-spacing: -0.36px;
        margin-bottom: 30px;
    }

    .process-box span {
        font-size: 68px;
    }

    .process-box h3 {
        font-size: 30px;
        letter-spacing: -0.72px;
        margin-bottom: 12px;
        margin-top: 6px;
    }

    .process-box p {
        font-size: 18px;
    }

    .process-right-col .process-box:not(:last-child) {
        margin-bottom: 34px;
    }

    .breakdown--wrapper {
        gap: 50px;
    }

    .breakdown--wrapper>* {
        width: 100%;
    }

    .breakdown-left-col h2 br {
        display: none;
    }

    .breakdown-left-col .sec-heading.txt-white h2 {
        max-width: 100%;
    }

    .breakdown-left-col .sec-heading {
        margin-bottom: 41px;
    }

    .breakdown-left-col p {
        font-size: 20px;
    }

    .breakdown-left-col p:not(:last-of-type) {
        margin-bottom: 28px;
    }

    .breakdown-left-col a {
        margin-top: 35px;
    }

    .breakdown-right-col {
        border-radius: 10px;
        padding: 40px;
    }

    .breakdown-right-col h6 {
        font-size: 24px;
        max-width: 100%;
        margin-bottom: 40px;
    }

    .service-list-box h3 {
        font-size: 24px;
    }

    .breakdown-right-col li:not(:last-child) {
        margin-bottom: 19px;
    }

    .service-list-box li,
    .cro-support--wrapper .service-list-box li {
        font-size: 18px;
        padding-left: 28px;
    }

    .breakdown-right-col li {
        font-size: 18px;
        padding-left: 28px;
    }

    .service-list-box li::before {
        width: 16px;
        height: 16px;
        top: 5px;
    }

    .breakdown-right-col li:before {
        width: 16px;
        height: 16px;
        top: 5px;
    }

    .why-us--wrapper {
        gap: 60px;
    }

    .why-us-heading-col {
        width: calc(30% - 30px);
    }

    .why-us-content-col {
        width: calc(70% - 30px);
    }

    .why-us-heading-col h2 {
        font-size: 38px;
    }

    .why-us-content-col p:not(:last-of-type) {
        margin-bottom: 25px;
    }

    .why-us-content-col p {
        font-size: 21px;
    }

    .why-us-content-col a {
        margin-top: 30px;
    }

    .faq--wrapper {
        gap: 40px;
        padding: 70px 0 80px;
    }

    .faq-heading-col {
        width: calc(38.85% - 20px);
    }

    .faq-body-col {
        width: calc(61.15% - 20px);
    }

    .accordian-heading h3 {
        font-size: 20px;
    }

    .accordian-body p {
        font-size: 18px;
    }

    .accordian-inner-body {
        padding-top: 7px;
        padding-bottom: 32px;
    }

    .uiux-hero--wrapper .hero-left-col {
        width: calc(55% - 15px);
    }

    .uiux-hero--wrapper .hero-right-col {
        width: calc(45% - 15px);
    }

    /* ============================================= Web development Services Page ============================================= */
    .service-hero-intro-banner--wrapper.web-dev-hero--wrapper {
        padding: 60px 30px 50px;
    }

    .service-intro--wrapper.service-web-dev-intro--wrapper {
        padding: 80px 0;
    }

    .service-web-dev-intro--wrapper .sec-heading span {
        margin-bottom: 35px;
    }

    .web-dev-process--wrapper h2 {
        font-size: 36px;
        letter-spacing: -0.36px;
        max-width: 373px;
    }

    .dev-process-box--wrapper {
        gap: 50px;
        margin-top: 50px;
    }

    .process-box--wrapper {
        width: calc(50% - 25px);
    }

    .process-heading span {
        width: 46px;
        height: 46px;
        font-size: 24px;
    }

    .process-heading h3 {
        font-size: 24px;
        letter-spacing: -0.36px;
    }

    .process-heading {
        margin-bottom: 15px;
    }

    .service-process-box p {
        font-size: 18px;
        line-height: 1.5;
    }

    .dev-process-box--wrapper .process-box--wrapper:last-child {
        padding-top: 80px;
    }

    .process-box--wrapper .service-process-box:not(:first-child),
    .process-box--wrapper a {
        margin-top: 60px;
    }

    .web-dev-breakdown-sec {
        padding: 80px 0;
    }

    .web-dev-breakdown--wrapper .sec-heading.txt-white h2 {
        max-width: 100%;
    }

    .web-dev-breakdown--wrapper .sec-heading {
        margin-bottom: 40px;
    }

    .web-dev-breakdown--wrapper p:not(:last-of-type) {
        margin-bottom: 35px;
    }

    .web-dev-breakdown--wrapper p {
        font-size: 20px;
    }

    .breakdown-box {
        padding-top: 40px;
        margin-top: 50px;
    }

    .breakdown-box h6 {
        margin-bottom: 35px;
    }

    .breakdown-box ul {
        column-count: 2;
        column-gap: 30px;
    }

    .breakdown-box ul li {
        margin-bottom: 20px;
    }

    .web-dev-breakdown--wrapper a {
        margin-top: 36px;
    }

    /* ============================================= Support Services Page ============================================= */
    .support-intro--wrapper .intro-content {
        gap: 30px;
        flex-direction: column;
    }

    .support-heading--wrapper h2 {
        font-size: 36px;
        max-width: 373px;
    }

    .support-process-box-slider {
        padding-top: 62px;
    }

    .support-process-box-slider .process-box h3 {
        margin-top: -19px;
    }

    .support-breakdown-left-col {
        position: relative;
        top: 0;
    }

    .support-breakdown-left-col .sec-heading h2 {
        max-width: 410px;
    }

    .support-breakdown-left-col a.arrow-btn.wht-color {
        display: none;
    }

    .support-breakdown-right-col p:not(:last-of-type) {
        margin-bottom: 26px;
    }

    .support-breakdown-right-col p {
        font-size: 20px;
    }

    .support-breakdown-right-col h3 {
        margin-top: 38px;
        padding-top: 40px;
        margin-bottom: 30px;
    }

    .support-breakdown-right-col ul li {
        margin-bottom: 20px;
    }

    .support-breakdown-sec {
        padding: 80px 0 74px;
    }

    /* ============================================= FAQ Page ============================================= */
    .page-header--wrapper {
        border-radius: 20px;
        padding: 78px 40px 78px;
        margin: 40px 0;
    }

    .page-header--wrapper span {
        font-size: 16px;
        padding-left: 23px;
        margin-bottom: 18px;
    }

    .page-header--wrapper h1 {
        font-size: 48px;
    }

    .newsletter--wrapper {
        padding: 80px 0;
    }

    .testimonial-box {
        border-radius: 29px;
        padding: 40px;
    }

    .testimonial-nav {
        padding-left: 20px;
        padding-top: 20px;
    }

    .testimonial-nav .swiper-arrow {
        width: 38px;
        height: 38px;
    }

    .testimonial-nav .swiper-arrow svg {
        height: auto;
        width: 20px;
    }

    .testimonial-box p {
        font-size: 18px;
        line-height: 1.6;
        margin: 24px 0 0;
    }

    .newsletter-box {
        border-radius: 29px;
        padding: 50px 40px;
        gap: 36px;
        margin-top: 40px;
    }

    .newsletter-box>div {
        width: 100%;
    }

    .newsletter-col-left h2 {
        font-size: 38px;
        letter-spacing: -0.5px;
    }

    .newsletter-col-left p {
        font-size: 18px;
    }

    .faq-left-col {
        display: none;
    }

    .faq-right-col {
        width: 100%;
    }

    .faq-search-field input {
        padding: 15px 20px 15px 57px;
        font-size: 17px;
    }

    .faq-search-field {
        margin-bottom: 10px;
    }

    .faq-right-col h2 {
        font-size: 34px;
        letter-spacing: -.78px;
        margin-bottom: 20px;
    }

    .accordian-inner-body li,
    .accordian-content-left-col a {
        font-size: 18px;
    }

    .list-with-dots li:after,
    .accordian-content-right-col li:after {
        top: 10px;
    }

    .list-with-check li:after,
    .accordian-content-left-col a::after {
        width: 16px;
        height: 16px;
        top: 4px;
    }

    .faq-right-col .accordian-inner-body .list-with-check li {
        padding-left: 27px;
    }

    .list-with-check li:not(:last-child) {
        margin-bottom: 11px;
    }

    .faq-right-col p:last-of-type,
    .accordian-content-left-col a:not(:last-child) {
        margin-bottom: 20px;
    }

    .accordian-content-col-wrapper {
        gap: 30px;
        margin-top: 35px;
    }

    .accordian-content-left-col a::after {
        top: 1px;
    }

    .accordian-content-right-col {
        border-radius: 14px;
        padding: 24px 18px 20px;
    }

    .faq-right-col .faq-content-box:not(:first-of-type) {
        margin-top: 50px;
    }

    .testimonial-box .quote-icon {
        top: 41px;
        right: 42px;
        max-width: 130px;
    }

    /* ============================================= Contact Page ============================================= */
    .contact-form--wrapper,
    .things-process--wrapper {
        padding: 80px 0;
    }

    .contact-form-left-col {
        width: 100%;
        position: relative;
        top: 0;
    }

    .contact-form-right-col {
        width: 100%
    }

    .contact-form-left-col h2 {
        font-size: 42px;
    }

    .contact-form-left-col p {
        font-size: 18px;
    }

    .contact-form-columns {
        gap: 50px;
    }

    .contact-field .radio-field label,
    .contact-field input,
    .contact-field textarea {
        font-size: 17px;
    }

    .thing-we-do {
        padding-right: 30px;
    }

    .thing-we-dont {
        padding-left: 30px;
    }

    .things-process--wrapper h2 {
        font-size: 34px;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .things-process--wrapper ul li {
        font-size: 18px;
        padding-left: 24px;
    }

    .things-process--wrapper ul li:not(:last-child) {
        margin-bottom: 20px;
    }

    .things-process--wrapper ul li:after {
        width: 16px;
        height: 16px;
        top: 5px;
    }

    /* ============================================= Case Study Page ============================================= */
    .case-study-top--wrapper .faq-search-field input {
        min-width: 100%;
    }

    .case-study-top--wrapper .faq-search-field {
        max-width: 100%;
    }

    .case-study-top--wrapper form {
        width: 100%;
    }

    .case-study-filter--box h6 {
        font-size: 14px;
        margin: 0 10px 0 0;
    }

    .case-study-filter--box {
        width: 100%;
        justify-content: flex-start;
    }

    .case-study-filter--box a {
        padding: 9px 12px;
        font-size: 17px;
    }

    .case-study--wrapper {
        padding: 40px 0 80px;
    }

    .newsletter-sec .newsletter-col-left h2 br {
        display: none;
    }

    .newsletter-sec .newsletter-box {
        margin: 0 0 80px;
    }

    /* ============================================= Case Study Details Page ============================================= */
    .case-study-top-content span {
        font-size: 16px;
        padding-left: 18px;
    }

    .case-study-top-content ul {
        gap: 7px;
    }

    .case-study-top-content ul li {
        padding: 8px 13px;
        font-size: 12px;
    }

    .case-study-hero--wrapper h1 {
        font-size: 45px;
        letter-spacing: -0.48px;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .case-study-video {
        padding-top: 472px;
    }

    .company-data--wrapper {
        padding: 80px 0;
    }

    .case-study-hero--wrapper {
        margin: 60px 0 20px;
    }

    .company-data--wrapper p {
        font-size: 22px;
        line-height: 1.5;
    }

    .company-box--wrapper {
        padding: 30px 20px;
        margin-top: 33px;
    }

    .company-box--wrapper span {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .company-box--wrapper p {
        font-size: 16px;
    }

    .company-box--wrapper .row {
        row-gap: 30px;
    }

    .case-study-summary--wrapper {
        padding: 80px 0 30px;
    }

    .case-study-summary--wrapper h2 {
        line-height: 1.2;
        text-indent: 161px;
    }

    .case-study-summary--wrapper p {
        font-size: 18px;
        margin: 25px 0 35px;
    }

    .case-study-challenge--wrapper {
        gap: 40px;
        padding: 80px 0 60px;
    }

    .challenge-left-col {
        width: calc(41.73% - 20px);
    }

    .challenge-right-col {
        width: calc(58.27% - 20px);
    }

    .case-study-challenge--wrapper span {
        margin-bottom: 20px;
    }

    .challenge-right-col p {
        font-size: 18px;
    }

    .challenge-include-box {
        margin-top: 30px;
        padding-top: 30px;
    }

    .challenge-include-box h3 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .challenge-include-box ul li {
        font-size: 18px;
        padding-left: 28px;
        margin-bottom: 20px;
    }

    .challenge-include-box ul {
        column-count: 1;
    }

    .challenge-include-box svg {
        width: 16px;
        height: 16px;
        top: 4px;
    }

    .case-study-solution--wrapper {
        padding: 80px 0;
    }

    .case-study-solution--wrapper .sec-heading.txt-white h2 {
        max-width: 100%;
    }

    .case-study-solution--wrapper .sec-heading p {
        font-size: 18px;
        line-height: 1.6;
        margin: 22px 0 0;
    }

    .case-study-solution-box {
        margin-top: 50px;
        padding-top: 50px;
    }

    .case-study-solution-box h3 {
        font-size: 34px;
        letter-spacing: -0.62px;
        margin-bottom: 20px;
    }

    .case-study-solution-box p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 40px;
    }

    .after-before--wrapper-main{
        margin-top: 40px;
        padding: 40px 20px 20px;
        border-radius: 14px;
    }

    .left-img {
        border-radius: 14px 0 0 14px;
    }

    .right-img {
        border-radius: 0 14px 14px 0;
    }

    .case-study-result-heading--wrapper {
        gap: 28px;
        align-items: flex-start;
        flex-direction: column;
    }

    .case-study-result-left-col,
    .case-study-result-right-col {
        width: 100%;
    }

    .case-study-result-right-col .row {
        row-gap: 30px;
    }

    .counter-box .counter,
    .text-col .counter-box .counter {
        font-size: 26px;
    }

    .case-study-result-heading--wrapper p,
    .case-study-result-content--wrapper .case-study-result-left-col p {
        font-size: 18px;
        line-height: 1.6;
        max-width: 100%;
    }

    .case-study-result-content--wrapper .case-study-result-left-col {
        position: relative;
        top: 0;
    }

    .case-study-result-content--wrapper {
        gap: 40px;
    }

    .case-study-result--wrapper {
        padding: 80px 0;
    }

    .strength-box h3 {
        font-size: 20px;
    }

    .strength-box p {
        font-size: 20px;
    }

    .strength-box svg {
        width: 14px;
        height: 14px;
    }

    .case-study-result-right-col .strength-box:not(:last-child) {
        margin-bottom: 30px;
    }

    .img-with-text-col>div {
        width: 100%;
    }

    .text-col .counter-box {
        width: calc(50% - 10px);
    }

    .text-col {
        display: flex;
        flex-wrap: wrap;
        gap: 30px 20px;
    }

    .text-col .counter-box:not(:last-child) {
        margin-bottom: 0;
    }

    .case-study-solution-box .text-col .counter-box p {
        font-size: 16px;
    }

    .case-study-testimonial--wrapper .testimonial-box,
    .case-study-faq--wrapper .faq--wrapper {
        padding-top: 80px;
    }

    .case-study-testimonial--wrapper .testimonial-box .quote-icon {
        top: 51px;
    }

    .case-study-project--wrapper .pt-150 {
        padding-bottom: 80px;
    }

    .transformation-text p {
        font-size: 12px;
    }

    /* ============================================= Case Study Details Version 2 ============================================= */
    .case-study-img-with-text--wrapper .case-study-top-content {
        padding: 0 40px 47px;
    }

    .case-study-img-with-text--wrapper h1 {
        font-size: 44px;
    }

    .case-study-overview--wrapper {
        gap: 40px;
        padding: 70px 0;
    }

    .overview-right {
        width: calc(42.54% - 20px);
    }

    .overview-left {
        width: calc(57.46% - 20px);
    }

    .case-study-overview--wrapper .company-box--wrapper {
        padding: 30px 20px;
    }

    .overview-left p {
        font-size: 18px;
    }

    .overview-left p:not(:first-of-type) {
        margin-top: 20px;
    }

    .overview-left img {
        margin-bottom: 35px;
    }

    .challenge--wrapper {
        padding: 80px 0 60px;
    }

    .challenge--wrapper h2 {
        font-size: 38px;
        letter-spacing: -1px;
        line-height: 1.18;
        margin-bottom: 24px;
    }

    .challenge--wrapper p {
        font-size: 20px;
    }

    .solutions-columns {
        gap: 34px;
    }

    .solution-left {
        width: calc(67.4% - 17px);
    }

    .solution-right {
        padding: 20px 10px;
        width: calc(32.6% - 17px);
    }

    .solution-styled-heading>* {
        font-size: 14px;
    }

    .solution-option-name span {
        font-size: 16px;
    }

    .solutions-styled-dropdown li a {
        font-size: 14px;
        line-height: 1.15;
    }

    .solutions-styled-dropdown ul {
        padding: 15px 10px;
    }

    .case-study-solution--wrapper .solution-left h2 {
        font-size: 32px;
    }

    .solution-left span {
        margin-bottom: 17px;
    }

    .solution-left .case-study-solution-box--wrapper .case-study-solution-box:first-child {
        margin-top: 40px;
        padding-top: 45px;
    }

    .column-collage-grid,
    .column-collage-grid>div {
        gap: 12px;
    }

    .collage-grid-one {
        width: calc(37.858% - 4px);
    }

    .collage-grid-two {
        width: calc(35.51% - 4px);
    }

    .collage-grid-third {
        width: calc(26.632% - 4px);
    }

    .solution-left h3 {
        /* margin-top: 30px; */
        font-size: 30px;
    }

    .solution-left .case-study-solution-box {
        margin-top: 50px;
    }

    .solution-left .img-col {
        width: 100%;
    }

    .solution-left .text-col {
        width: 100%;
        padding: 40px 20px;
    }

    .case-study-solution-box ul li {
        font-size: 18px;
        line-height: 1.5;
        padding-left: 14px;
    }

    .case-study-solution-box ul {
        padding-left: 7px;
        margin-top: 20px;
    }

    .solution-left .row {
        row-gap: 10px;
        margin: 0 -5px;
    }

    .solution-left .row>div {
        padding: 0 5px;
    }

    /* ============================================= Blog Hub Page ============================================= */
    .blog-hub--wrapper .blog-box--wrapper {
        gap: 40px 20px;
    }

    .blog-hub--wrapper .blog-media,
    .blog-media {
        padding-top: 270px;
        border-radius: 18px;
        margin-bottom: 20px;
    }

    .blog-hub--wrapper .blog-top--wrapper {
        gap: 10px;
    }

    .blog-hub--wrapper .blog-tag li {
        padding: 7px 10px;
        font-size: 12px;
    }

    .blog-hub--wrapper .blog-box h2 {
        font-size: 24px;
    }

    .blog-hub--wrapper .blog-box h2 br {
        display: none;
    }

    #page_navigation {
        margin-top: 40px;
    }

    .insight-box--wrapper .insight-box:not(:last-child) {
        padding-bottom: 30px;
    }

    .insight-box {
        padding-top: 30px;
        gap: 20px;
        flex-direction: column;
    }

    .insight-box h3 {
        font-size: 26px;
        margin-bottom: 18px;
    }

    .insight-box h3 br {
        display: none;
    }

    .insight-box p {
        font-size: 18px;
        max-width: 100%;
    }

    .insight--wrapper {
        padding: 80px 0;
    }

    .insight--wrapper .sec-heading h2 {
        font-size: 42px;
    }

    .insight--wrapper .sec-heading span {
        margin-bottom: 20px;
    }

    .blog-hub--wrapper .blog-box.layout-large {
        width: calc(58.03% - 10px);
    }

    .blog-hub--wrapper .blog-box {
        width: calc(41.97% - 10px);
    }

    /* ============================================= Blog Page ============================================= */
    .main-blog-content h1 {
        font-size: 40px;
    }

    .main-blog-content {
        padding: 30px 30px 0 0;
        max-width: 350px;
    }

    .main-blog--wrapper .blog-media {
        padding-top: 57.8%;
    }

    .main-blog-content span {
        margin-bottom: 20px;
    }

    .blog--wrapper .blog-box--wrapper {
        gap: 40px 10px;
    }

    .blog--wrapper .blog-box,
    .blog--wrapper .blog-box.layout-large {
        width: calc(33.33% - 7px);
    }

    .blog--wrapper .blog-media {
        padding-top: 200px;
    }

    .blog--wrapper .blog-box h2 {
        margin-top: 18px;
        font-size: 20px;
    }

    .blog--wrapper .blog-tag li {
        padding: 7px 10px;
        font-size: 12px;
    }

    .blog--wrapper .blog-tag {
        gap: 5px;
    }

    .blog--wrapper .blog-media svg {
        bottom: 10px;
        right: 10px;
        width: 20px;
        height: auto;
    }

    .blog--wrapper .blog-box span {
        font-size: 12px;
        ;
    }

    .blog--wrapper .blog-box span svg {
        width: 10px;
        height: auto;
    }

    /* ============================================= Article Page ============================================= */
    .article-media {
        padding-top: 62%;
        border-radius: 18px;
    }

    .article-hero-content .content-svg {
        width: 18px;
    }

    .article-hero-content .bottom-right-corner {
        top: -18px;
    }

    .article-hero-content .top-left-corner {
        left: -18px;
    }

    .article-hero-content {
        max-width: 500px;
        border-radius: 18px 0 0 0;
        padding: 24px 0 0 24px;
    }

    .article-hero-content h1 {
        font-size: 46px;
    }

    .back-blog-btn {
        font-size: 16px;
        letter-spacing: -0.32px;
        margin-bottom: 20px;
    }

    .article-content-right-col {
        display: none;
    }

    .article-content-left-col {
        width: 100%;
    }

    .article-content--wrapper {
        padding-top: 76px;
        padding-bottom: 70px;
    }

    .article-content-left-col p,
    .article-main--wrapper .article-content-left-col div:not(.article-content) p {
        font-size: 20px;
    }

    .article-content-left-col>div:not(:last-child) {
        padding-bottom: 60px;
    }

    .article-content-left-col h3 {
        font-size: 24px;
    }

    .article-content-left-col h4 {
        font-size: 28px;
    }

    .article-content-left-col h4 {
        font-size: 20px;
        margin: 20px 0 0;
    }

    .article-content-left-col table {
        margin-top: 23px;
    }

    .article-content-left-col table th {
        padding: 20.5px 20px;
        font-size: 16px;
    }

    .article-content-left-col table td {
        font-size: 18px;
        padding: 19px 20px;
    }

    .article-content-left-col ul li {
        font-size: 18px;
        padding-left: 15px;
    }

    .article-content-left-col ul {
        margin-top: 18px;
    }

    .article-content-left-col ul li:after {
        top: 10px;
    }

    .article-img-box {
        margin-top: 42px;
    }

    .article-img-box .article-content-img {
        flex: unset;
    }

    .article-content-left-col blockquote {
        font-size: 30px;
        margin-top: 70px;
    }

    #faq h2 {
        margin-bottom: 30px;
    }

    .article-content-left-col .article-info .article-info-box+p {
        font-size: 16px;
        max-width: 442px;
    }

    .article-info {
        gap: 30px;
        padding-top: 30px;
    }

    .author-box {
        width: 60px;
        height: 60px;
        font-size: 32px;
    }

    .author-info span {
        font-size: 12px;
    }

    .author-info h3 {
        font-size: 18px;
        margin: 7px 0 4px;
    }

    html body .article-content-left-col .article-info-box .author-info p {
        font-size: 14px;
    }

    .related-article--wrapper {
        padding: 0;
    }

    .article-main--wrapper .article-content-left-col h2 {
        font-size: 32px;
    }

    .article-content-left-col .shape-box h4 {
        font-size: 20px;
    }

    article .article-content-left-col .shape-box p {
        font-size: 20px;
        margin-top: 7px;
    }

    .article-content-left-col .shape-box h4:after {
        width: 18px;
        height: 18px;
        top: 3px;
    }

    .quote-content span {
        font-size: 18px;
        margin-top: 17px;
    }

    article .article-content-left-col .img-with-text p {
        max-width: 490px;
        font-size: 20px;
    }

    .article-content-left-col .img-with-text {
        margin-top: 60px;
    }

    .article-img {
        margin-top: 60px;
    }

    .article-main--wrapper .article-content-left-col div:not(.article-content) .article-img p {
        font-size: 18px;
    }

    /* ============================================= Stress-Free Website Redesign Checklist ============================================= */
    .article-redesign-hero--wrapper h1 {
        font-size: 68px;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .article-redesign-hero--wrapper img {
        border-radius: 25px;
        margin-top: 40px;
        margin-bottom: -147px;
    }

    .article-redesign-hero--wrapper {
        margin-bottom: 87px;
    }

    .article-intro--wrapper {
        padding: 100px 0;
    }

    .article-intro--wrapper p:first-child {
        padding-right: 0;
        margin-bottom: 20px;
    }

    .article-intro--wrapper p:nth-of-type(2) {
        padding-left: 0;
    }

    .article-intro--wrapper p {
        font-size: 20px;
    }

    .article-intro--wrapper img {
        border-radius: 20px;
        margin-top: 39px;
    }

    .need-redesign--wrapper .sec-heading.txt-white h2 {
        max-width: 280px;
    }

    .redesign-checklist-box {
        gap: 30px;
        margin-top: 45px;
        flex-direction: column;
    }

    .redesign-checklist-box p {
        font-size: 20px;
        position: relative;
        top: 0;
    }

    .icon-with-text li {
        font-size: 18px;
        padding-left: 28px;
    }

    .icon-with-text li:after {
        width: 16px;
        height: 16px;
        top: 2px;
    }

    .icon-with-text li:not(:last-child) {
        margin-bottom: 20px;
    }

    .redesign-img-box {
        gap: 20px;
        margin: 60px 0 0px;
    }

    .redesign-img-left {
        width: calc(58.27% - 10px);
    }

    .redesign-img-right {
        width: calc(41.73% - 10px);
    }

    .redesign-img-box img {
        border-radius: 20px;
    }

    .redesign-img-box p {
        margin: 20px 0 0;
        font-size: 18px;
    }

    .sanity-checkbox {
        border-radius: 30px;
        padding: 50px 30px;
        margin-top: 60px;
    }

    .sanity-checkbox h3 {
        font-size: 32px;
    }

    .sanity-checkbox p {
        font-size: 18px;
    }

    .sanity-checkbox ul {
        column-gap: 30px;
        margin-top: 30px;
    }

    .redesign-payoff-sec h2 {
        max-width: 340px;
    }

    .redesign-payoff-columns {
        gap: 40px;
    }

    .payoff-left-col {
        width: calc(35.32% - 20px);
    }

    .payoff-right-col {
        width: calc(64.68% - 20px);
    }

    .payoff-left-col h3 {
        font-size: 24px;
    }

    .payoff-right-col p {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .payoff-right-col img {
        border-radius: 20px;
    }

    .redesign-paysoff--wrapper .sec-heading {
        margin-bottom: 50px;
    }

    .plan-work-img {
        padding-top: 406px;
    }

    .plan-work-heading {
        padding: 40px 40px 30px 0;
    }

    .plan-work--wrapper p {
        font-size: 18px;
    }

    .plan-work--wrapper .icon-with-text {
        column-gap: 20px;
        margin-top: 20px;
    }

    .plan-wrok-desc {
        gap: 20px;
        margin-top: 35px;
        flex-direction: column;
    }

    .plan-work--wrapper p:first-child {
        max-width: 100%;
    }

    .plan-work--wrapper p:last-child {
        flex: auto;
    }

    .effective-design--wrapper .sec-heading.txt-white h2 {
        max-width: 400px;
    }

    .effective-design-columns {
        gap: 40px;
        margin-top: 48px;
    }

    .effective-design-columns>div {
        width: calc(50% - 20px);
    }

    .effective-design-columns p {
        font-size: 17px;
        line-height: 1.5;
    }

    .effective-design-left-col ul {
        margin: 20px 0;
    }

    .effective-design-right-col h3 {
        font-size: 24px;
        margin: 20px 0 30px;
    }

    .effective-design-right-col {
        padding-top: 90px;
    }

    .what-bulit--wrapper h2 {
        max-width: 280px;
    }

    .what-bulit--wrapper .row {
        margin: 44px -25px 00;
    }

    .what-bulit--wrapper .col-4 {
        padding: 0 25px;
        width: 100%;
    }

    .bulit-box h3 {
        font-size: 24px;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .bulit-box p {
        font-size: 18px;
    }

    .what-bulit--wrapper .row .col-4:nth-child(2),
    .what-bulit--wrapper .row .col-4:last-child {
        padding-top: 35px;
    }

    .design-launch--wrapper {
        gap: 30px;
    }

    .design-launch--wrapper>div {
        width: calc(50% - 15px);
    }

    .launch-left-col p {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .launch-left-col h2 {
        max-width: 260px;
    }

    .launch-right-col {
        position: sticky;
        top: 120px;
    }

    .compounds-updates--wrapper .sec-heading+p {
        font-size: 18px;
        margin: 35px 0 42px;
    }

    .compounds-updates--wrapper .article-info.article-content {
        margin-top: 50px;
        padding-top: 50px;
    }

    .compounds-updates--wrapper .article-info .article-info-box+p {
        font-size: 18px;
        line-height: 1.2;
        max-width: 442px;
    }

    .checklist-blog--wrapper {
        padding: 80px 0;
    }

    /* ============================================= Quick Local SEO Wins ============================================= */
    .article-seo-content {
        padding: 30px;
    }

    .article-seo-content h1 {
        font-size: 48px;
        max-width: 520px;
        margin: 20px 0 25px;
    }

    .article-seo-img {
        padding-bottom: 398px;
    }

    .quick-seo-intro--wrapper p {
        font-size: 20px;
        margin-bottom: 21px;
    }

    .quick-seo-intro--wrapper h2 {
        font-size: 28px;
        padding-top: 24px;
        max-width: 680px;
    }

    .meta-desc--wrapper .sec-heading p {
        font-size: 18px;
        margin: 18px 0 0;
    }

    .social-image--wrapper .sec-heading.txt-white h2 {
        max-width: 100%;
    }

    .key-pages-intro {
        gap: 30px;
        margin-top: 30px;
        margin-bottom: 30px;
        flex-direction: column;
    }

    .key-pages-intro>* {
        width: 100%;
    }

    .key-pages-intro p {
        font-size: 18px;
    }

    .social-image--wrapper h3 {
        font-size: 22px;
        margin-top: 42px;
    }

    .social-image--wrapper ul.icon-with-text {
        column-gap: 30px;
        margin-top: 20px;
    }

    .business-profile-sec p,
    .lp-regions--wrapper p {
        margin-bottom: 20px;
        font-size: 18px;
    }

    .business-profile-sec img {
        margin: 28px 0;
    }

    .site-navigation--wrapper .row {
        margin: 40px -15px 0;
    }

    .site-navigation--wrapper .col-4 {
        padding: 0 15px;
    }

    .site-navigation--wrapper p {
        font-size: 17px;
        margin-bottom: 27px;
    }

    .site-navigation--wrapper img {
        border-radius: 18px;
    }

    .site-navigation--wrapper .row .col-4:nth-child(2) {
        padding-top: 50px;
    }

    .site-navigation--wrapper .row .col-4:last-child {
        padding-top: 100px;
    }

    .lp-service--wrapper .launch-left-col h2 {
        max-width: 100%;
    }

    .lp-regions--wrapper .sec-heading {
        margin-bottom: 35px;
    }

    .regions-box--wrapper {
        margin-top: 53px;
        margin-bottom: 46px;
    }

    .regions-box--wrapper img {
        border-radius: 18px;
    }

    .lp-regions--wrapper .regions-left-box p {
        margin: 20px 0 0;
    }

    .lp-regions--wrapper .article-info .article-info-box+p {
        font-size: 18px;
        line-height: 1.2;
        max-width: 442px;
    }

    .lp-regions--wrapper .article-info {
        margin-top: 56px;
        padding-top: 50px;
    }

    .work-box:hover .card-info {
        padding-bottom: 115px;
    }

    .work-box:hover .work-info:after {
        background: linear-gradient(357deg, rgba(21, 21, 21, 0.9) 29%, rgba(21, 21, 21, 0.00) 73.61%);
    }

    .megamenu-col .desktop_show a {
        margin-top: 1rem;
    }
    /* ============================================= 404 ============================================= */
    .not-found-content h1 {
        font-size: 54px;
    }
    .not-found-content p {
        font-size: 20px;
        margin-bottom: 38px;
    }
    section.not-found-main--wrapper {
        padding: 270px 0 130px 0;
    }
}

@media (min-width:992px) and (max-width:1199px) {

    /* Header */
    .navbar-brand img {
        max-width: 160px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        font-size: 17px;
        padding: 40px 0;
    }

    .navbar.sticky-header img {
        max-width: 150px;
    }

    .megamenu-col .desktop_show a {
        gap: 8px;
    }

    .nav-quote-btn {
        font-size: 17px;
        gap: 20px;
    }

    .navbar-expand-lg .navbar-nav {
        gap: 20px;
    }

    .navbar-expand-lg .navbar-nav .nav-link span::after {
        bottom: 31px;
    }

    /* Hero Banner */
    .hero-heading--wrapper h1 {
        font-size: 51px;
        max-width: 624px;
    }

    .hero-heading--wrapper {
        padding: 0px 40px 30px 0px;
    }

    .hero-card a {
        min-height: 144px;
        letter-spacing: -1px;
        font-size: 30px;
    }

    .hero-desc--wrapper {
        border-radius: 20px;
        min-height: auto;
        padding: 30px;
        margin-top: -174px;
    }

    .hero-desc--wrapper p {
        font-size: 21px;
        margin-bottom: 40px;
    }

    .hero-banner--wrapper {
        padding: 60px 0 25px;
    }

    /* Footer */
    .footer--wrapper {
        padding: 68px 50px 30px 50px;
        margin-bottom: 40px;
    }

    .footer-menu--wrapper a,
    .footer-menu--wrapper p {
        font-size: 16px;
    }

    .footer-info h2 {
        font-size: 70px;
        letter-spacing: -1.58px;
    }

    .footer-info a {
        margin-top: 25px;
        font-size: 16px;
        gap: 20px;
    }

    .footer-menu--wrapper {
        gap: 40px;
    }

    .footer-bottom {
        padding-top: 30px;
        margin-top: 40px;
    }

    .back-to-top {
        font-size: 18px;
    }

    /* Mission */
    .mission-sec {
        padding: 120px 0;
        margin-top: 40px;
    }

    .mission--wrapper {
        flex-wrap: nowrap;
        gap: 50px;
    }

    .mission-content {
        max-width: 727px;
    }

    .mission-content p {
        font-size: 24px;
        letter-spacing: 0;
        line-height: 1.6;
        text-indent: 75px;
    }

    .mission-content a {
        margin-top: 40px;
    }

    /* Our Work */
    .sec-heading h2 {
        font-size: 42px;
    }

    .sec-heading p {
        font-size: 20px;
        margin-top: 28px;
    }

    .work-box {
        margin-top: 40px;
    }

    .work-media {
        padding-bottom: 105.7%;
    }

    .work-right-col .sec-heading h2 {
        font-size: 48px;
        max-width: 360px;
    }

    .work-info h3 {
        font-size: 36px;
    }

    .project--wrapper .work-info:after {
        border-radius: 14px;
    }

    .work-info p {
        font-size: 18px;
    }

    .work-info {
        padding: 30px;
    }

    .explor-btn {
        margin-top: 80px;
    }

    .explor-btn h4 {
        font-size: 38px;
    }

    .work--wrapper {
        padding: 100px 0;
    }

    .def-btn {
        gap: 23px;
        padding: 9px 18px;
        font-size: 18px;
    }

    .def-btn span {
        width: 45px;
        height: 28px;
    }

    /* Our Service */
    .service-heading-col p {
        font-size: 20px;
        margin: 20px 0 35px;
        line-height: 1.6;
    }

    .pt-160 {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .service-heading h3 {
        font-size: 30px;
    }

    .service-heading h3 sup {
        font-size: 20px;
        top: -12px;
    }

    .service-inner-body {
        padding-top: 15px;
        padding-bottom: 42px;
    }

    .service-info li {
        font-size: 20px;
        margin-bottom: 26px;
    }

    .service-info li:after {
        top: 2px;
    }

    .service-info li:before {
        top: 4px;
    }

    .service-info-col .service-accordian:not(:last-of-type) {
        margin-bottom: 40px;
    }

    /* About */
    .about-heading {
        left: -17.25em;
        max-width: 916px;
        min-width: 684px;
        padding-left: 40px;
        padding-bottom: 27px;
        margin-bottom: 10px;
    }

    .about-heading span {
        left: 40px;
    }

    .about-heading h2 {
        font-size: 37px;
        text-indent: 233px;
    }

    .about-info-col p:not(:last-child) {
        margin-bottom: 20px;
    }

    .about-info-col p {
        font-size: 20px;
    }

    .about--wrapper {
        padding: 100px 0;
    }

    .about-heading:before {
        left: 11.81rem;
    }

    /* Our Blog */
    .blog-box--wrapper {
        gap: 30px;
    }

    .blog-box {
        width: calc(33.33% - 20px);
    }

    .blog-img {
        border-radius: 18px;
        margin-bottom: 20px;
    }

    .our-blog--wrapper {
        padding: 100px 0;
    }

    .blog-box h2 {
        font-size: 26px;
        margin: 10px 0 0;
    }

    .blog-box p {
        font-size: 18px;
    }

    .blog-tag li {
        border-radius: 8px;
        font-size: 12px;
    }

    .blog-tag {
        padding: 0px 0px 7px 10px;
    }

    /* CTA Slider */
    .cta-slider p {
        font-size: 74px;
    }

    .cta-slider p svg {
        width: 34px;
        height: auto;
    }

    /* ================================= About Page ================================= */
    .about-hero-left-col h1 {
        font-size: 56px;
        margin-bottom: 30px;
    }

    .about-content-box {
        padding: 30px;
    }

    .about-content-box p:not(:last-child) {
        margin-bottom: 33px;
    }

    .about-content-box p {
        font-size: 20px;
    }

    .mission--wrapper.about-content--wrapper {
        padding: 100px 0;
    }

    .about-content--wrapper .mission-content {
        max-width: 757px;
    }

    .about-cta--wrapper {
        padding: 100px 60px;
        border-radius: 0px 0px 40px 40px;
    }

    .about-cta--wrapper h2 {
        font-size: 58px;
    }

    .about-cta--wrapper h2 br {
        display: none;
    }

    .about-cta--wrapper p {
        font-size: 20px;
        margin: 26px auto 30px;
    }

    .heading-with-text.sec-heading span {
        top: 18px;
    }

    .story-content-box {
        padding: 40px 20px;
    }

    .story-content-box p {
        font-size: 16px;
        margin-top: 20px;
    }

    .story-info {
        margin-top: 50px;
    }

    .client-info h3 {
        font-size: 18px;
    }

    .client-info span {
        font-size: 16px;
    }

    .company-logo {
        border-radius: 6px;
        width: 50px;
        height: 50px;
        font-size: 32px;
    }

    .stats--wrapper {
        padding: 100px 0 120px 0;
    }

    .stats--wrapper p {
        font-size: 22px;
    }

    .stats--wrapper h2 {
        font-size: 32px;
    }

    .stats--wrapper .col-4 {
        min-height: 300px;
    }

    .stats--wrapper .ref-rate {
        padding-bottom: 30px;
    }

    .team-heading--wrapper p {
        font-size: 20px;
        max-width: 403px;
    }

    .team-heading--wrapper {
        gap: 50px;
    }

    .team-slider {
        margin: 47px 0 80px;
    }

    .our-team--wrapper {
        padding: 40px 0px 100px 0px;
    }

    .client--wrapper .sec-heading h2 {
        font-size: 44px;
        letter-spacing: -1.04px;
        text-indent: 300px;
    }

    .client-logo--wrapper {
        margin: 48px 0 60px;
    }

    .logo-box {
        border-radius: 14px;
        padding: 20px 12px;
    }

    .pt-150.client--wrapper {
        padding: 60px 0 100px;
    }

    .our-project--wrapper .col-6 .work-media {
        padding-bottom: 105%;
    }

    .our-project--wrapper .col-12 .work-media {
        padding-bottom: 42%;
    }

    .pt-150 {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    /* ============================================= Services Page ============================================= */
    .service-hero-banner--wrapper {
        border-radius: 30px;
        padding: 90px 40px 113px 40px;
        margin: 30px 0;
    }

    .service-hero-banner--wrapper h1 {
        font-size: 56px;
        letter-spacing: -0.48px;
        max-width: 680px;
    }

    .services-detail--wrapper {
        padding: 80px 0;
    }

    .service-heading--wrapper h2 {
        font-size: 45px;
    }

    .service-heading--wrapper p {
        font-size: 21px;
    }

    .service-card,
    .service-card-detail {
        width: calc(50% - 15px);
        padding: 44px 30px 25px 30px;
    }

    .service-card--wrapper {
        gap: 30px;
        margin-top: 57px;
    }

    .service-card h3 {
        font-size: 36px;
        margin-bottom: 15px;
    }

    .service-card p {
        font-size: 20px;
        margin-bottom: 22px;
    }

    .service-card-detail p {
        font-size: 20px;
        margin: 16px 0 0;
    }

    .service-card-detail ul {
        margin: 32px 0 42px;
    }

    .service-card-detail li {
        font-size: 19px;
        padding-left: 30px;
    }

    .service-card-detail ul li:not(:last-child) {
        margin-bottom: 14px;
    }

    .service-card-detail li:before {
        width: 16px;
        height: 16px;
        top: 4px;
    }

    .service-card h3 sup {
        font-size: 21px;
        top: -12px;
    }

    .industry-tools--wrapper h2 {
        font-size: 48px;
        margin-bottom: 57px;
    }

    .tools-box img {
        max-height: 60px;
    }

    .tools-box {
        border-radius: 18px;
        padding: 15px;
    }

    .industry-tools--wrapper a.def-btn {
        margin-top: 50px;
    }

    .blog-slider--wrapper {
        gap: 80px;
        padding: 80px 0;
    }

    .blog-slider-right-col {
        width: calc(70.9% - 40px);
    }

    .blog-slider-left-col {
        width: calc(29.1% - 40px);
    }

    /* ============================================= Branding Services Page ============================================= */
    .service-hero-intro-banner--wrapper {
        padding: 50px 40px;
        gap: 40px;
    }

    .hero-left-col {
        width: calc(53.4% - 20px);
    }

    .hero-right-col {
        width: calc(46.6% - 20px);
    }

    .hero-left-col h1 {
        font-size: 42px;
        margin-bottom: 25px;
    }

    .hero-left-col p {
        font-size: 18px;
    }

    .service-hero-intro-banner--wrapper span {
        padding: 8px 17px 12px 26px;
        font-size: 16px;
    }

    .service-intro--wrapper {
        padding: 77px 0 82px 0;
        gap: 50px;
    }

    .intro-content {
        max-width: 695px;
    }

    .uiux-intro-content {
        max-width: 685px;
    }

    .intro-content p:first-child {
        text-indent: 91px;
    }

    .intro-content p:not(:last-of-type) {
        margin-bottom: 27px;
    }

    .intro-content p {
        font-size: 22px;
    }

    .service-process--wrapper {
        gap: 60px;
    }

    .process-left-col {
        width: calc(47.1% - 30px);
    }

    .process-right-col {
        width: calc(52.9% - 30px);
    }

    .process-left-col h2 {
        font-size: 50px;
        margin-bottom: 35px;
    }

    .process-box span {
        font-size: 78px;
    }

    .process-box h3 {
        font-size: 36px;
        margin-bottom: 17px;
    }

    .process-box p {
        font-size: 18px;
    }

    .process-right-col .process-box:not(:last-child) {
        margin-bottom: 34px;
    }

    .breakdown--wrapper {
        gap: 60px;
    }

    .breakdown-left-col {
        width: calc(59% - 30px);
    }

    .breakdown-right-col {
        width: calc(41% - 30px);
        padding: 50px 30px;
    }

    .breakdown-left-col .sec-heading.txt-white h2 {
        max-width: 100%;
    }

    .breakdown-left-col .sec-heading {
        margin-bottom: 41px;
    }

    .breakdown-left-col p:not(:last-of-type) {
        margin-bottom: 28px;
    }

    .breakdown-left-col p {
        font-size: 22px;
    }

    .breakdown-left-col a {
        margin-top: 35px;
    }

    .breakdown-right-col h6 {
        font-size: 26px;
        max-width: 136px;
        margin-bottom: 44px;
    }

    .service-list-box h3 {
        font-size: 26px;
    }

    .breakdown-right-col li:not(:last-child) {
        margin-bottom: 18px;
    }

    .service-list-box li {
        font-size: 20px;
        padding-left: 30px;
    }

    .breakdown-right-col li {
        font-size: 20px;
        padding-left: 30px;
    }

    .service-list-box li::before {
        width: 16px;
        height: 16px;
        top: 6px;
    }

    .breakdown-right-col li:before {
        width: 16px;
        height: 16px;
        top: 6px;
    }

    .why-us--wrapper {
        gap: 80px;
    }

    .why-us-heading-col {
        width: calc(30% - 40px);
    }

    .why-us-content-col {
        width: calc(70% - 40px);
    }

    .why-us-heading-col h2 {
        font-size: 52px;
    }

    .why-us-content-col p:not(:last-of-type) {
        margin-bottom: 29px;
    }

    .why-us-content-col p {
        font-size: 22px;
    }

    .why-us-content-col a {
        margin-top: 38px;
    }

    .faq--wrapper {
        padding: 80px 0 110px;
    }

    .accordian-body p {
        font-size: 20px;
    }

    .uiux-hero--wrapper .hero-right-col {
        width: calc(45% - 20px);
    }

    .uiux-hero--wrapper .hero-left-col {
        width: calc(55% - 20px);
    }

    .story-slider-pagination .swiper-arrow {
        border-radius: 6px;
        width: 38px;
        height: 38px;
    }

    /* ============================================= Web development Services Page ============================================= */
    .service-intro--wrapper.service-web-dev-intro--wrapper {
        padding: 77px 0 82px;
    }

    .service-web-dev-intro--wrapper .sec-heading span {
        margin-bottom: 35px;
    }

    .web-dev-process--wrapper h2 {
        font-size: 48px;
    }

    .dev-process-box--wrapper {
        gap: 50px;
        margin-top: 63px;
    }

    .process-box--wrapper {
        width: calc(50% - 25px);
    }

    .process-heading span {
        width: 50px;
        height: 50px;
        font-size: 26px;
    }

    .process-heading h3 {
        font-size: 28px;
        letter-spacing: -0.46px;
    }

    .service-process-box p {
        font-size: 18px;
    }

    .process-heading {
        margin-bottom: 20px;
    }

    .dev-process-box--wrapper .process-box--wrapper:last-child {
        padding-top: 100px;
    }

    .process-box--wrapper .service-process-box:not(:first-child),
    .process-box--wrapper a {
        margin-top: 70px;
    }

    .web-dev-breakdown-sec {
        padding: 90px 0;
    }

    .web-dev-breakdown--wrapper p:not(:last-of-type) {
        margin-bottom: 35px;
    }

    .web-dev-breakdown--wrapper p {
        font-size: 22px;
    }

    .breakdown-box {
        padding-top: 37px;
        margin-top: 50px;
    }

    .breakdown-box h6 {
        margin-bottom: 28px;
    }

    .breakdown-box ul li {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .breakdown-box ul li:before {
        top: 3px;
    }

    .breakdown-box ul {
        column-gap: 20px;
    }

    .web-dev-breakdown--wrapper a {
        margin-top: 36px;
    }

    .arrow-btn {
        font-size: 18px;
    }

    /* ============================================= Support Services Page ============================================= */
    .support-hero--wrapper .hero-right-col {
        width: calc(45% - 20px);
    }

    .support-hero--wrapper .hero-left-col {
        width: calc(55% - 20px);
    }

    .support-heading--wrapper h2 {
        font-size: 50px;
        max-width: 523px;
    }

    .support-process-box-slider .process-box h3 {
        margin-top: -22px;
    }

    .support-process-box-slider {
        padding-top: 62px;
    }

    .support-breakdown-right-col p:not(:last-of-type) {
        margin-bottom: 30px;
    }

    .support-breakdown-right-col p {
        font-size: 22px;
    }

    .support-breakdown-right-col h3 {
        margin-top: 38px;
        padding-top: 35px;
        margin-bottom: 28px;
    }

    .support-breakdown-right-col ul li,
    .cro-support--wrapper .service-list-box li {
        font-size: 16px;
        padding-left: 30px;
        margin-bottom: 20px;
    }

    .cro-support--wrapper ul li:nth-last-child(-n+3) {
        min-width: auto;
    }

    .support-breakdown-right-col ul li:before {
        top: 4px;
    }

    .support-breakdown-sec {
        padding: 90px 0 74px;
    }

    /* ============================================= FAQ Page ============================================= */
    .page-header--wrapper {
        border-radius: 30px;
        padding: 88px 40px 93px;
    }

    .page-header--wrapper h1 {
        font-size: 56px;
        letter-spacing: -0.48px;
    }

    .newsletter--wrapper {
        padding: 80px 0;
    }

    .testimonial-box {
        border-radius: 30px;
        padding: 40px;
    }

    .testimonial-nav {
        padding-left: 30px;
        padding-top: 30px;
    }

    .testimonial-nav .swiper-arrow {
        width: 40px;
        height: 40px;
    }

    .testimonial-box p {
        font-size: 18px;
        margin: 27px 0 0;
    }

    .newsletter-box {
        border-radius: 30px;
        padding: 50px 40px;
        gap: 32px;
        margin-top: 50px;
    }

    .newsletter-col-left h2 {
        font-size: 42px;
        letter-spacing: -0.56px;
    }

    .newsletter-col-left p {
        font-size: 20px;
        max-width: 360px;
    }

    .newsletter-col-right form input {
        font-size: 18px;
        min-width: 280px;
    }

    .newsletter-col-right button.def-btn {
        gap: 15px;
    }

    .faq-sec.faq--wrapper {
        gap: 40px;
    }

    .faq-left-col {
        width: calc(25% - 20px);
    }

    .faq-right-col {
        width: calc(75% - 20px);
    }

    .faq-menu a {
        font-size: 18px;
        gap: 10px;
    }

    .faq-menu li:not(:last-child) {
        margin-bottom: 22px;
    }

    .faq-menu a svg {
        width: 16px;
        height: auto;
    }

    .faq-search-field input {
        padding: 15px 20px 15px 60px;
        font-size: 18px;
    }

    .faq-right-col h2 {
        font-size: 38px;
        margin-bottom: 22px;
    }

    .search-chips .search-chip {
        font-size: 16px;
        padding: 5px 10px;
        gap: 6px;
    }

    .active-search .clear-all {
        font-size: 13px;
        padding: 4px 12px;
    }

    .list-with-dots li:after,
    .accordian-content-right-col li:after {
        top: 11px;
    }

    .faq-right-col p:last-of-type {
        margin-bottom: 20px;
    }

    .list-with-check li:after,
    .accordian-content-left-col a::after {
        width: 16px;
        height: 16px;
        top: 6px;
    }

    .faq-right-col .accordian-inner-body .list-with-check li {
        padding-left: 30px;
    }

    .list-with-check li:not(:last-child) {
        margin-bottom: 13px;
    }

    .accordian-content-col-wrapper {
        margin-top: 40px;
    }

    .accordian-content-left-col a {
        padding-left: 30px;
        font-size: 18px;
    }

    .accordian-content-left-col a:not(:last-child) {
        margin-bottom: 23px;
    }

    .accordian-content-left-col a::after {
        top: 2px;
    }

    .accordian-inner-body li {
        font-size: 20px;
    }

    .faq-right-col .faq-content-box:not(:first-of-type) {
        margin-top: 55px;
    }

    .testimonial-box .quote-icon {
        top: 41px;
        right: 42px;
        max-width: 150px;
    }

    /* ============================================= Megamenu ============================================= */
    .megamenu--wrapper {
        border-radius: 0 0 30px 30px;
        padding: 40px 0;
    }

    .megamenu-col li a {
        font-size: 15px;
    }

    .megamenu-content-box h4 {
        font-size: 23px;
        margin-bottom: 19px;
    }

    .megamenu-col ul li:not(:last-child) {
        margin-bottom: 20px;
    }

    .megamenu-content-box p {
        font-size: 16px;
    }

    .megamenu-content-box {
        padding: 40px 25px 35px 20px;
    }

    .megamenu-content-box svg {
        top: 10px;
        right: 10px;
        width: 24px;
        height: auto;
    }

    .megamenu-col {
        width: calc(25% - 15px);
    }

    .megamenu--wrapper .container {
        gap: 20px;
    }

    .megamenu-col h6 {
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* ============================================= Contact Page ============================================= */
    .contact-form--wrapper {
        padding: 80px 0;
    }

    .contact-form-left-col h2 {
        font-size: 44px;
        margin-bottom: 17px;
    }

    .contact-form-left-col p {
        font-size: 20px;
    }

    .contact-field label {
        margin-bottom: 12px;
    }

    .contact-field input,
    .contact-field textarea {
        padding: 12px 20px;
        font-size: 17px;
    }

    .contact-field .radio-field label {
        font-size: 17px;
    }

    .contact-form-right-col button.def-btn {
        margin-top: 40px;
    }

    .things-process--wrapper {
        padding: 100px 0;
    }

    .things-process--wrapper h2 {
        font-size: 40px;
        margin-bottom: 35px;
    }

    .thing-we-do {
        padding-right: 40px;
    }

    .thing-we-dont {
        padding-left: 40px;
    }

    .things-process--wrapper ul li {
        font-size: 19px;
        padding-left: 30px;
    }

    .things-process--wrapper ul li:after {
        width: 18px;
        height: 18px;
        top: 5px;
    }

    /* ============================================= Case Study Page ============================================= */
    .case-study-filter--box a {
        padding: 10px 12px;
        font-size: 16px;
    }

    .case-study-filter--box h6 {
        font-size: 14px;
    }

    .case-study--wrapper {
        padding: 40px 0 80px;
    }

    .newsletter-sec .newsletter-box {
        margin: 0 0 80px;
    }

    /* ============================================= Case Study Details Page ============================================= */
    .case-study-top-content span {
        font-size: 16px;
        padding-left: 22px;
    }

    .case-study-top-content ul li {
        font-size: 13px;
    }

    .case-study-hero--wrapper h1 {
        font-size: 54px;
        margin-bottom: 40px;
    }

    .case-study-video {
        padding-top: 612px;
    }

    .company-data--wrapper {
        padding: 80px 0;
    }

    .company-data--wrapper p {
        font-size: 22px;
    }

    .company-box--wrapper {
        padding: 42px 35px;
        margin-top: 37px;
    }

    .company-box--wrapper p {
        font-size: 20px;
    }

    .case-study-summary--wrapper {
        padding: 80px 0 30px;
    }

    .case-study-summary--wrapper h2 {
        line-height: 1.2;
    }

    .case-study-summary--wrapper p {
        font-size: 20px;
        margin: 29px 0 37px;
    }

    .case-study-challenge--wrapper {
        gap: 60px;
        padding: 80px 0 100px;
    }

    .challenge-left-col {
        width: calc(41.73% - 30px);
    }

    .challenge-right-col {
        width: calc(58.27% - 30px);
    }

    .challenge-right-col p {
        font-size: 20px;
    }

    .challenge-include-box {
        margin-top: 30px;
        padding-top: 30px;
    }

    .challenge-include-box h3 {
        font-size: 32px;
        margin-bottom: 32px;
    }

    .challenge-include-box ul li {
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 22px;
    }

    .challenge-include-box svg {
        width: 16px;
        height: 16px;
    }

    .case-study-solution--wrapper .sec-heading p {
        font-size: 20px;
        margin: 25px 0 0;
    }

    .case-study-solution-box {
        margin-top: 50px;
        padding-top: 50px;
    }

    .case-study-solution-box h3 {
        font-size: 38px;
        margin-bottom: 20px;
    }

    .case-study-solution-box p {
        font-size: 20px;
        margin-bottom: 50px;
    }

    .case-study-result-heading--wrapper p,
    .case-study-result-content--wrapper .case-study-result-left-col p,
    .case-study-adriancrook-assoicates .case-study-result-heading--wrapper p {
        font-size: 20px;
        line-height: 1.6;
        max-width: 577px;
    }

    .case-study-result-heading--wrapper .case-study-result-right-col p {
        line-height: 1.2;
        font-size: 16px;
    }

    .case-study-result--wrapper {
        padding: 80px 0 100px;
    }

    .case-study-result-right-col .row {
        row-gap: 30px;
    }

    .case-study-testimonial--wrapper .testimonial-box {
        padding-top: 80px;
    }

    .case-study-result-content--wrapper .case-study-result-right-col {
        padding-bottom: 40px;
    }

    .case-study-result-right-col {
        padding: 30px;
    }

    .strength-box h3 {
        font-size: 22px;
    }

    .strength-box p {
        font-size: 18px;
    }

    .case-study-result-right-col .strength-box:not(:last-child) {
        margin-bottom: 34px;
    }

    .text-col {
        padding: 30px 30px 30px 30px;
    }

    .text-col .counter-box .counter {
        font-size: 28px;
        margin-bottom: 7px;
    }

    .case-study-solution-box .text-col .counter-box p {
        font-size: 17px;
    }

    .text-col .counter-box:not(:last-child) {
        margin-bottom: 12px;
    }

    /* ============================================= Case Study Details Version 2 ============================================= */
    .case-study-img-with-text--wrapper .case-study-top-content {
        padding: 0 40px 40px;
    }

    .case-study-img-with-text--wrapper h1 {
        font-size: 54px;
    }

    .case-study-overview--wrapper {
        gap: 60px;
        padding: 80px 0;
    }

    .overview-left {
        width: calc(57.46% - 30px);
    }

    .overview-right {
        width: calc(42.54% - 30px);
    }

    .case-study-overview--wrapper .company-box--wrapper {
        margin: 0;
        padding: 30px;
    }

    .overview-left p {
        font-size: 20px;
    }

    .overview-left img {
        margin-bottom: 39px;
    }

    .challenge--wrapper {
        padding: 80px 0 61px;
    }

    .challenge--wrapper h2 {
        font-size: 48px;
        margin-bottom: 24px;
    }

    .challenge--wrapper p {
        font-size: 20px;
    }

    .solutions-columns {
        gap: 60px;
    }

    .solution-left {
        width: calc(67.4% - 30px);
    }

    .solution-right {
        padding: 20px 10px;
        width: calc(32.6% - 30px);
    }

    .solution-styled-heading>* {
        font-size: 15px;
    }

    .solution-option-name span {
        font-size: 18px;
    }

    .solutions-styled-dropdown li a {
        font-size: 16px;
    }

    .case-study-solution--wrapper .solution-left h2 {
        font-size: 40px;
    }

    .solution-left .case-study-solution-box--wrapper .case-study-solution-box:first-child {
        margin-top: 38px;
        padding-top: 50px;
    }

    .solution-left h3 {
        /* margin-top: 30px; */
        font-size: 34px;
        margin-bottom: 15px;
    }

    .solution-left .case-study-solution-box {
        margin-top: 50px;
    }

    .solution-left .text-col {
        padding: 40px 20px;
    }

    .solution-left .row {
        row-gap: 15px;
        margin: 0 -7.5px;
    }

    .solution-left .row>div {
        padding: 0 7.5px;
    }

    /* ============================================= Blog Hub Page ============================================= */
    .blog-hub--wrapper .blog-box--wrapper {
        gap: 40px 28px;
    }

    .blog-hub--wrapper .blog-box {
        width: calc(41.97% - 14px);
    }

    .blog-box.layout-large {
        width: calc(58.03% - 14px);
    }

    .blog-top--wrapper {
        gap: 14px;
    }

    .blog-hub--wrapper .blog-media,
    .blog-media {
        padding-top: 300px;
        border-radius: 20px;
        margin-bottom: 20px;
    }

    .insight--wrapper {
        padding: 96px 0;
    }

    .insight--wrapper .sec-heading h2 {
        font-size: 54px;
    }

    .insight-heading {
        min-width: 337px;
    }

    .insight-box h3 {
        font-size: 24px;
        margin-bottom: 23px;
    }

    .insight-box p {
        font-size: 18px;
    }

    .insight-box--wrapper .insight-box:not(:last-child) {
        padding-bottom: 40px;
    }

    .insight-box {
        padding-top: 30px;
        gap: 30px;
    }

    /* ============================================= Blog Page ============================================= */
    .main-blog-content {
        padding: 30px 30px 0 0;
        max-width: 490px;
    }

    .main-blog-content h1 {
        font-size: 50px;
    }

    .blog--wrapper .blog-box h2 br {
        display: none;
    }

    .blog--wrapper .blog-media {
        padding-top: 225px;
    }

    /* ============================================= Article Page ============================================= */
    .article-hero-content h1 {
        font-size: 54px;
    }

    .article-hero-content {
        max-width: 560px;
    }

    .article-content--wrapper {
        gap: 40px;
        padding-top: 76px;
        padding-bottom: 80px;
    }

    .article-content-left-col {
        width: calc(67.34% - 20px);
        counter-reset: section;
    }

    .article-content-right-col {
        width: calc(32.66% - 20px);
        padding: 20px;
    }

    .article-content-left-col p,
    .article-main--wrapper .article-content-left-col div:not(.article-content) p {
        font-size: 20px;
    }

    .article-content-left-col h3 {
        font-size: 26px;
    }

    .article-content-left-col h4 {
        font-size: 30px;
    }

    .article-content-left-col h4 {
        font-size: 20px;
    }

    .article-content-left-col table th {
        padding: 20.5px 20px;
        font-size: 17px;
    }

    .article-content-left-col table td {
        font-size: 18px;
        padding: 19px 20px;
    }

    .article-content-left-col ul li {
        font-size: 18px;
    }

    .article-content-left-col ul {
        margin-top: 17px;
    }

    .article-content-left-col ul li:after {
        top: 10px;
    }

    .article-img-box .article-content-img {
        flex: unset;
        border-radius: 20px;
    }

    .article-img-box {
        margin-top: 42px;
    }

    .article-content-left-col blockquote {
        font-size: 28px;
        margin-top: 65px;
        margin-bottom: 0;
    }

    #faq h2 {
        margin-bottom: 40px;
    }

    .article-info {
        gap: 20px;
        padding-top: 20px;
    }

    .article-content-left-col .article-info .article-info-box+p {
        font-size: 16px;
        max-width: 400px;
    }

    .author-box {
        width: 55px;
        height: 55px;
        font-size: 30px;
    }

    .author-info span {
        font-size: 12px;
    }

    .author-info h3 {
        font-size: 18px;
    }

    html body .article-content-left-col .article-info-box .author-info p {
        font-size: 14px;
    }

    .article-content-left-col>div:not(:last-child) {
        padding-bottom: 76px;
    }

    .article-content-right-col ul li a {
        gap: 10px;
        font-size: 18px;
    }

    .article-content-right-col a svg {
        width: 14px;
        height: auto;
    }

    .related-article--wrapper {
        padding: 0;
    }

    .article-main--wrapper .article-content-left-col h2 {
        font-size: 36px;
    }

    .article-content-left-col .shape-box h4 {
        font-size: 21px;
    }

    article .article-content-left-col .shape-box p {
        font-size: 20px;
        margin-top: 7px;
    }

    .article-content-left-col .shape-box h4:after {
        width: 18px;
        height: 18px;
        top: 3px;
    }

    .quote-content span {
        font-size: 18px;
        margin-top: 20px;
    }

    article .article-content-left-col .img-with-text p {
        max-width: 480px;
        font-size: 20px;
    }

    .article-content-left-col .img-with-text {
        margin-top: 70px;
    }

    .article-img {
        margin-top: 70px;
    }

    .article-main--wrapper .article-content-left-col div:not(.article-content) .article-img p {
        font-size: 18px;
    }

    /* ============================================= Stress-Free Website Redesign Checklist ============================================= */
    .article-redesign-hero--wrapper h1 {
        font-size: 84px;
        margin-bottom: 20px;
    }

    .article-intro--wrapper {
        padding: 100px 0;
    }

    .article-intro--wrapper p:first-child {
        padding-right: 140px;
        margin-bottom: 30px;
    }

    .article-intro--wrapper p:nth-of-type(2) {
        padding-left: 140px;
    }

    .article-intro--wrapper p {
        font-size: 22px;
    }

    .article-intro--wrapper img {
        border-radius: 24px;
        margin-top: 39px;
    }

    .need-redesign--wrapper h2 {
        max-width: 330px;
    }

    .redesign-checklist-box {
        gap: 50px;
        margin-top: 45px;
    }

    .redesign-checklist-box p {
        font-size: 20px;
        max-width: 420px;
    }

    .icon-with-text li {
        font-size: 18px;
        padding-left: 30px;
    }

    .icon-with-text li:not(:last-child) {
        margin-bottom: 22px;
    }

    .icon-with-text li:after {
        width: 16px;
        height: 16px;
        top: 2px;
    }

    .redesign-img-box {
        margin: 60px 0 -2px;
    }

    .redesign-img-box p {
        margin: 30px 0 0;
        font-size: 20px;
    }

    .sanity-checkbox {
        border-radius: 32px;
        padding: 60px 40px;
        margin-top: 60px;
    }

    .sanity-checkbox h3 {
        font-size: 34px;
    }

    .sanity-checkbox p {
        font-size: 20px;
    }

    .sanity-checkbox ul {
        column-gap: 30px;
    }

    .redesign-paysoff--wrapper .sec-heading {
        margin-bottom: 50px;
    }

    .redesign-paysoff--wrapper .redesign-payoff-columns:not(:last-child) {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .redesign-payoff-columns {
        gap: 60px;
    }

    .payoff-left-col {
        width: calc(35.32% - 30px);
    }

    .payoff-right-col {
        width: calc(64.68% - 30px);
    }

    .payoff-left-col h3 {
        font-size: 25px;
    }

    .payoff-right-col p {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .payoff-right-col a.arrow-btn {
        margin-bottom: 20px;
    }

    .plan-work-img {
        padding-top: 446px;
    }

    .plan-work-heading {
        padding: 40px 40px 30px 0;
    }

    .plan-work--wrapper p {
        font-size: 20px;
    }

    .plan-work--wrapper .icon-with-text {
        column-gap: 30px;
        margin-top: 20px;
    }

    .plan-wrok-desc {
        gap: 40px;
        margin-top: 40px;
    }

    .effective-design-columns {
        gap: 40px;
        margin-top: 50px;
    }

    .effective-design-columns>div {
        width: calc(50% - 20px);
    }

    .effective-design-columns p {
        font-size: 20px;
    }

    .effective-design-left-col ul {
        margin: 25px 0;
    }

    .effective-design-right-col h3 {
        font-size: 24px;
        margin: 20px 0 40px;
    }

    .effective-design-right-col {
        padding-top: 100px;
    }

    .what-bulit--wrapper h2 {
        max-width: 350px;
    }

    .bulit-box h3 {
        font-size: 24px;
        margin-bottom: 24px;
        padding-bottom: 20px;
    }

    .bulit-box p {
        font-size: 18px;
        line-height: 1.6;
    }

    .what-bulit--wrapper .row .col-4:nth-child(2) {
        padding-top: 60px;
    }

    .what-bulit--wrapper .row .col-4:last-child {
        padding-top: 140px;
    }

    .what-bulit--wrapper .col-4 {
        padding: 0 15px;
    }

    .what-bulit--wrapper .row {
        margin: 49px -15px 00;
    }

    .launch-left-col h2 {
        max-width: 310px;
    }

    .launch-left-col p {
        font-size: 20px;
        margin-bottom: 21px;
    }

    .compounds-updates--wrapper .sec-heading+p {
        font-size: 20px;
        margin: 45px 0 52px;
    }

    .compounds-updates--wrapper .article-info.article-content {
        margin-top: 60px;
        padding-top: 60px;
        gap: 50px;
    }

    .compounds-updates--wrapper .article-info .article-info-box+p {
        font-size: 18px;
    }

    .checklist-blog--wrapper {
        padding: 100px 0 80px;
    }

    /* ============================================= Quick Local SEO Wins ============================================= */
    .article-seo-content {
        padding: 40px;
    }

    .article-seo-content h1 {
        font-size: 55px;
        max-width: 610px;
        margin: 24px 0 35px;
    }

    .article-seo-img {
        padding-bottom: 480px;
    }

    .article-quick-seo-sec .blog-tag {
        padding: 0;
    }

    .quick-seo-intro--wrapper p {
        font-size: 22px;
        margin-bottom: 26px;
    }

    .quick-seo-intro--wrapper h2 {
        font-size: 38px;
        max-width: 920px;
        padding-top: 24px;
    }

    .meta-desc--wrapper .sec-heading {
        margin-bottom: 56px;
    }

    .key-pages-intro {
        gap: 60px;
        margin-top: 45px;
        margin-bottom: 52px;
    }

    .key-pages-intro>* {
        width: calc(50% - 30px);
    }

    .key-pages-intro p {
        font-size: 20px;
    }

    .social-image--wrapper h3 {
        margin-top: 51px;
    }

    .business-profile-sec p,
    .lp-regions--wrapper p {
        font-size: 20px;
        margin-bottom: 21px;
    }

    .business-profile-sec img {
        margin: 29px 0;
    }

    .site-navigation--wrapper .row {
        margin: 50px -20px 0;
    }

    .site-navigation--wrapper .col-4 {
        padding: 0 20px;
    }

    .site-navigation--wrapper p {
        font-size: 18px;
        margin-bottom: 34px;
    }

    .site-navigation--wrapper img {
        border-radius: 20px;
    }

    .site-navigation--wrapper .row .col-4:nth-child(2) {
        padding-top: 60px;
    }

    .site-navigation--wrapper .row .col-4:last-child {
        padding-top: 100px;
    }

    .lp-service--wrapper .launch-left-col h2 {
        max-width: 100%;
    }

    .lp-regions--wrapper .sec-heading {
        margin-bottom: 45px;
    }

    .regions-box--wrapper {
        gap: 30px;
        margin-top: 53px;
        margin-bottom: 56px;
    }

    .regions-left-box {
        width: calc(60% - 15px);
    }

    .lp-regions--wrapper .regions-left-box p {
        margin: 25px 0 0;
    }

    .lp-regions--wrapper .article-info {
        margin-top: 66px;
        gap: 50px;
        padding-top: 60px;
    }

    .lp-regions--wrapper .article-info .article-info-box+p {
        font-size: 18px;
    }

    .work-box:hover .card-info {
        padding-bottom: 100px;
    }

    .work-box:hover .work-info:after {
        background: linear-gradient(357deg, rgba(21, 21, 21, 0.9) 29%, rgba(21, 21, 21, 0.00) 73.61%);
    }
    /* ============================================= 404 ============================================= */
    .not-found-content h1 {
        font-size: 64px;
    }
    .not-found-content p {
        font-size: 22px;
        margin-bottom: 40px;
    }
    .not-found-main--wrapper {
        padding: 300px 0 150px 0;
    }

}

@media (min-width:1200px) and (max-width:1359px) {

    /* Header */
    .navbar-brand img {
        max-width: 190px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        font-size: 18px;
        padding: 48px 0;
    }

    .nav-quote-btn {
        font-size: 18px;
        gap: 25px;
    }

    .navbar-right {
        width: 227px;
    }

    /* Hero Banner */
    .hero-heading--wrapper h1 {
        font-size: 67px;
        max-width: 764px;
    }

    .hero-heading--wrapper {
        padding: 0px 50px 30px 0px;
    }

    .hero-desc--wrapper {
        padding: 40px;
        min-height: 378px;
    }

    .hero-banner--wrapper {
        padding: 60px 0 25px;
    }

    .hero-desc--wrapper p {
        font-size: 24px;
    }

    .hero-card a {
        padding: 20px;
        min-height: 164px;
        font-size: 34px;
    }

    /* Mission */
    .mission-content {
        max-width: 896px;
    }

    .mission-content a {
        margin-top: 50px;
    }

    .mission-sec {
        padding: 150px 0;
        margin-top: 60px;
    }

    .sec-heading h2 {
        font-size: 52px;
    }

    /* Our Service */
    .service-heading h3 {
        font-size: 34px;
    }

    .work-info h3 {
        font-size: 42px;
    }

    .service-heading-col p {
        font-size: 22px;
        line-height: 1.6;
    }

    /* About */
    .about-heading {
        left: -21.25em;
        max-width: 916px;
        min-width: 834px;
        padding-left: 40px;
        padding-bottom: 37px;
        margin-bottom: 0;
    }

    .about-heading span {
        left: 40px;
    }

    .about-heading h2 {
        font-size: 40px;
    }

    .about-info-col p {
        font-size: 22px;
    }

    .about-heading:before {
        left: 15.81rem;
    }

    .about--wrapper {
        padding: 120px 0;
    }

    /* Work Box */
    .explor-btn {
        margin-top: 100px;
    }

    .work--wrapper {
        padding: 120px 0;
    }

    .work-right-col .sec-heading h2 {
        font-size: 58px;
        max-width: 450px;
    }

    /* Our Blog */
    .blog-box h2 {
        font-size: 28px;
    }

    .our-blog--wrapper {
        padding: 120px 0;
    }

    /* CTA Slider */
    .cta-slider p {
        font-size: 94px;
    }

    .footer-menu--wrapper {
        gap: 60px;
    }

    /* ================================= About Page ================================= */
    .about-cta--wrapper {
        padding: 120px 80px;
        border-radius: 0 0 40px 40px;
    }

    .about-cta--wrapper h2 {
        font-size: 66px;
    }

    .about-cta--wrapper p {
        font-size: 24px;
        margin: 30px auto 32px;
    }

    .about-hero-left-col h1 {
        font-size: 66px;
    }

    .about-content-box p {
        font-size: 22px;
    }

    .about-content--wrapper .mission-content {
        max-width: 896px;
    }

    .mission-content p {
        font-size: 26px;
    }

    .mission--wrapper.about-content--wrapper {
        padding: 120px 0;
    }

    .stats--wrapper {
        padding: 100px 0 160px 0;
    }

    .stats--wrapper h2 {
        font-size: 34px;
    }

    .stats--wrapper .col-4 {
        min-height: 323px;
    }

    .stats--wrapper .ref-rate {
        padding-bottom: 35px;
    }

    .team-heading--wrapper p {
        font-size: 22px;
        max-width: 453px;
    }

    .our-team--wrapper {
        padding: 30px 0px 130px 0px;
    }

    .team-slider {
        margin: 50px 0 86px;
    }

    .client--wrapper .sec-heading h2 {
        font-size: 52px;
        letter-spacing: -1.04px;
        text-indent: 300px;
    }

    .pt-150.client--wrapper {
        padding: 90px 0 120px;
    }

    .pt-150 {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .our-project--wrapper .col-6 .work-media {
        padding-bottom: 82.7%;
    }

    .pt-160 {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    /* ============================================= Services Page ============================================= */
    .service-hero-banner--wrapper {
        border-radius: 32px;
        padding: 80px 40px 123px 40px;
    }

    .service-hero-banner--wrapper h1 {
        font-size: 64px;
        max-width: 780px;
    }

    .service-heading--wrapper h2 {
        font-size: 50px;
    }

    .service-heading--wrapper p {
        font-size: 22px;
        max-width: 780px;
    }

    .service-card--wrapper {
        margin-top: 67px;
    }

    .service-card {
        padding: 44px 30px 25px 30px;
    }

    .service-card h3 {
        font-size: 40px;
    }

    .service-card p {
        font-size: 20px;
    }

    .service-card-detail p {
        font-size: 23px;
    }

    .service-card-detail ul {
        margin: 32px 0 42px;
    }

    .service-card-detail ul li:not(:last-child) {
        margin-bottom: 13px;
    }

    .service-card-detail li {
        font-size: 20px;
    }

    .service-card-detail li:before {
        width: 16px;
        height: 16px;
        top: 4px;
    }

    .service-card h3 sup {
        font-size: 22px;
        top: -11px;
    }

    .industry-tools--wrapper h2 {
        font-size: 58px;
        margin-bottom: 57px;
    }

    .tools-box img {
        max-height: 70px;
    }

    .industry-tools--wrapper a.def-btn {
        margin-top: 60px;
    }

    .blog-slider--wrapper {
        gap: 110px;
    }

    .blog-slider-left-col {
        width: calc(29.1% - 55px);
    }

    .blog-slider-right-col {
        width: calc(70.9% - 55px);
    }

    /* ============================================= Branding Services Page ============================================= */
    .hero-left-col h1 {
        font-size: 50px;
    }

    .hero-left-col p {
        font-size: 21px;
    }

    .service-intro--wrapper {
        padding: 87px 0 112px 0;
    }

    .intro-content {
        max-width: 835px;
    }

    .intro-content p:not(:last-of-type) {
        margin-bottom: 28px;
    }

    .intro-content p {
        font-size: 25px;
    }

    .process-left-col h2 {
        font-size: 58px;
    }

    .process-box span {
        font-size: 88px;
    }

    .process-box h3 {
        font-size: 40px;
    }

    .process-box p {
        font-size: 20px;
    }

    .process-right-col .process-box:not(:last-child) {
        margin-bottom: 44px;
    }

    .breakdown-left-col .sec-heading.txt-white h2 {
        font-size: 48px;
    }

    .breakdown-left-col p {
        font-size: 25px;
    }

    .breakdown-right-col h6 {
        max-width: 146px;
        margin-bottom: 65px;
    }

    .service-list-box h3 {
        font-size: 28px;
    }

    .breakdown-right-col li:not(:last-child) {
        margin-bottom: 18px;
    }

    .cro-support--wrapper ul li:nth-last-child(-n+3) {
        min-width: auto;
    }

    .service-list-box li,
    .cro-support--wrapper .service-list-box li {
        font-size: 20px;
    }

    .service-list-box li::before {
        width: 18px;
        height: 18px;
        top: 5px;
    }

    .why-us-heading-col h2 {
        font-size: 58px;
    }

    .why-us-content-col p {
        font-size: 26px;
    }

    .why-us-content-col p:not(:last-of-type) {
        margin-bottom: 31px;
    }

    .why-us-content-col a {
        margin-top: 38px;
    }

    .faq--wrapper {
        padding: 80px 0 120px;
    }

    .accordian-body p {
        font-size: 20px;
    }

    /* ============================================= Web development Services Page ============================================= */
    .service-intro--wrapper.service-web-dev-intro--wrapper {
        padding: 87px 0 112px;
    }

    .service-web-dev-intro--wrapper .sec-heading span {
        margin-bottom: 42px;
    }

    .web-dev-process--wrapper h2 {
        font-size: 58px;
    }

    .dev-process-box--wrapper {
        gap: 60px;
        margin-top: 65px;
    }

    .process-box--wrapper {
        width: calc(50% - 30px);
    }

    .process-heading span {
        width: 54px;
        height: 54px;
        font-size: 28px;
    }

    .process-heading h3 {
        font-size: 30px;
    }

    .process-heading {
        margin-bottom: 23px;
    }

    .service-process-box p {
        font-size: 20px;
    }

    .process-box--wrapper .service-process-box:not(:first-child),
    .process-box--wrapper a {
        margin-top: 72px;
    }

    .dev-process-box--wrapper .process-box--wrapper:last-child {
        padding-top: 110px;
    }

    .web-dev-breakdown--wrapper p {
        font-size: 25px;
    }

    .web-dev-breakdown--wrapper p:not(:last-of-type) {
        margin-bottom: 35px;
    }

    .breakdown-box {
        padding-top: 44px;
        margin-top: 59px;
    }

    .breakdown-box h6 {
        margin-bottom: 38px;
    }

    .breakdown-box ul li {
        font-size: 19px;
        margin-bottom: 24px;
    }

    .breakdown-box ul {
        column-gap: 46px;
    }

    /* ============================================= Support Services Page ============================================= */
    .support-heading--wrapper h2 {
        font-size: 58px;
    }

    .support-process-box-slider .process-box h3 {
        margin-top: -26px;
    }

    .support-process-box-slider {
        padding-top: 72px;
    }

    .support-breakdown-right-col p {
        font-size: 25px;
    }

    .support-breakdown-right-col h3 {
        margin-top: 38px;
        padding-top: 40px;
        margin-bottom: 38px;
    }

    .support-breakdown-right-col ul li {
        font-size: 19px;
        margin-bottom: 24px;
    }

    .support-breakdown-right-col ul li:before {
        top: 4px;
    }

    .support-breakdown-sec {
        padding: 120px 0 84px;
    }

    /* ============================================= FAQ Page ============================================= */
    .page-header--wrapper h1 {
        font-size: 64px;
    }

    .page-header--wrapper {
        border-radius: 34px;
        padding: 108px 50px 98px;
    }

    .testimonial-box {
        border-radius: 35px;
        padding: 50px;
    }

    .newsletter-box {
        border-radius: 35px;
        padding: 60px 50px;
        gap: 40px;
        margin-top: 60px;
    }

    .newsletter-col-left {
        width: calc(51% - 31px);
    }

    .newsletter-col-right {
        width: calc(49% - 31px);
    }

    .newsletter-col-left h2 {
        font-size: 44px;
    }

    .newsletter-col-left p {
        font-size: 20px;
    }

    .newsletter-col-right form input {
        font-size: 18px;
        min-width: 280px;
    }

    .faq-menu a {
        font-size: 22px;
        gap: 10px;
    }

    .faq-menu a svg {
        width: 18px;
        height: auto;
    }

    .faq-right-col h2 {
        font-size: 46px;
    }

    .accordian-inner-body li {
        font-size: 20px;
    }

    .list-with-check li:after,
    .accordian-content-left-col a::after {
        width: 18px;
        height: 18px;
        top: 4px;
    }

    .list-with-check li:not(:last-child) {
        margin-bottom: 13px;
    }

    .accordian-content-col-wrapper {
        margin-top: 40px;
    }

    .accordian-content-left-col a::after {
        top: 0;
    }

    .accordian-content-left-col a:not(:last-child) {
        margin-bottom: 24px;
    }

    .accordian-content-left-col a {
        font-size: 18px;
    }

    .faq-right-col .faq-content-box:not(:first-of-type) {
        margin-top: 61px;
    }

    /* ============================================= Megamenu ============================================= */
    .megamenu--wrapper {
        padding: 45px 0;
    }

    .megamenu--wrapper .container {
        gap: 20px;
    }

    .megamenu-col {
        width: calc(25% - 15px);
    }

    .megamenu-col h6 {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .megamenu-col li a {
        font-size: 18px;
    }

    .megamenu-content-box h4 {
        font-size: 26px;
        margin-bottom: 21px;
    }

    .megamenu-content-box p {
        font-size: 18px;
    }

    /* ============================================= Contact Page ============================================= */
    .contact-form-left-col h2 {
        font-size: 58px;
    }

    .contact-form-left-col p {
        font-size: 21px;
    }

    .contact-field input,
    .contact-field textarea,
    .contact-field .radio-field label {
        font-size: 18px;
    }

    .things-process--wrapper {
        padding: 120px 0;
    }

    .things-process--wrapper h2 {
        font-size: 48px;
    }

    .things-process--wrapper ul li {
        font-size: 20px;
    }

    /* ============================================= Case Study Details Page ============================================= */
    .case-study-hero--wrapper h1 {
        font-size: 60px;
        margin-bottom: 38px;
    }

    .case-study-video {
        padding-top: 682px;
    }

    .company-data--wrapper {
        padding: 90px 0;
    }

    .company-data--wrapper p {
        font-size: 24px;
    }

    .company-box--wrapper {
        padding: 50px;
        margin-top: 37px;
    }

    .company-box--wrapper p {
        font-size: 20px;
    }

    .case-study-summary--wrapper {
        padding: 90px 0 40px;
    }

    .case-study-summary--wrapper p {
        font-size: 22px;
        margin: 45px 0 37px;
    }

    .case-study-challenge--wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 80px;
        align-items: flex-start;
        padding: 90px 0 120px;
    }

    .challenge-right-col p {
        font-size: 22px;
    }

    .challenge-include-box {
        margin-top: 37px;
        padding-top: 37px;
    }

    .challenge-include-box ul li {
        font-size: 20px;
        margin-bottom: 25px;
    }

    .challenge-include-box svg {
        width: 18px;
        height: 18px;
        top: 4px;
    }

    .challenge-include-box h3 {
        font-size: 34px;
        margin-bottom: 32px;
    }

    .case-study-solution--wrapper .sec-heading p {
        font-size: 22px;
        margin: 25px 0 0;
    }

    .case-study-solution-box {
        margin-top: 60px;
        padding-top: 60px;
    }

    .case-study-solution-box h3 {
        font-size: 40px;
        margin-bottom: 20px;
    }

    .case-study-solution-box p {
        margin-bottom: 60px;
    }

    .case-study-result--wrapper {
        padding: 90px 0 120px;
    }

    .case-study-result-heading--wrapper p,
    .case-study-result-content--wrapper .case-study-result-left-col p,
    .case-study-adriancrook-assoicates .case-study-result-heading--wrapper p {
        font-size: 22px;
        max-width: 677px;
    }

    .case-study-testimonial--wrapper .testimonial-box {
        padding-top: 90px;
    }

    .case-study-faq--wrapper .faq--wrapper {
        padding-top: 114px;
    }

    .case-study-result-right-col .row {
        row-gap: 40px;
    }

    .strength-box h3 {
        font-size: 22px;
    }

    .strength-box p {
        font-size: 20px;
    }

    .case-study-result-right-col .strength-box:not(:last-child) {
        margin-bottom: 38px;
    }

    .text-col {
        padding: 40px 50px 35px 40px;
    }

    .text-col .counter-box .counter {
        font-size: 30px;
    }

    /* ============================================= Case Study Details Version 2 ============================================= */
    .case-study-img-with-text--wrapper .case-study-top-content {
        padding: 0 50px 57px;
    }

    .case-study-img-with-text--wrapper h1 {
        font-size: 64px;
    }

    .overview-left p {
        font-size: 22px;
    }

    .case-study-overview--wrapper {
        padding: 80px 0;
    }

    .overview-left img {
        margin-bottom: 47px;
    }

    .challenge--wrapper {
        padding: 110px 0 91px;
    }

    .challenge--wrapper h2 {
        font-size: 58px;
        margin-bottom: 28px;
    }

    .challenge--wrapper p {
        font-size: 22px;
    }

    .case-study-solution--wrapper .solution-left h2 {
        font-size: 42px;
    }

    .solution-left .case-study-solution-box--wrapper .case-study-solution-box:first-child {
        margin-top: 38px;
        padding-top: 50px;
    }

    .solution-left .case-study-solution-box {
        margin-top: 60px;
    }

    .solution-left h3 {
        /* margin-top: 40px; */
        font-size: 36px;
        margin-bottom: 17px;
    }

    .solution-left .text-col {
        padding: 40px 20px;
    }

    /* ============================================= Blog Hub Page ============================================= */
    .blog-hub--wrapper .blog-box--wrapper {
        gap: 46px 30px;
    }

    .blog-hub--wrapper .blog-box {
        width: calc(41.97% - 15px);
    }

    .blog-box.layout-large {
        width: calc(58.03% - 15px);
    }

    .blog-hub--wrapper .blog-top--wrapper {
        gap: 20px;
    }

    .blog-hub--wrapper .blog-media,
    .blog-media {
        padding-top: 320px;
    }

    .insight--wrapper {
        padding: 110px 0;
    }

    .insight-heading {
        min-width: 400px;
    }

    .insight-box h3 {
        font-size: 27px;
    }

    .insight-box {
        gap: 40px;
    }

    .insight--wrapper .sec-heading h2 {
        font-size: 58px;
    }

    /* ============================================= Blog Page ============================================= */
    .main-blog-content h1 {
        font-size: 58px;
    }

    .main-blog-content {
        max-width: 570px;
    }

    /* ============================================= Article Page ============================================= */
    .article-hero-content h1 {
        font-size: 60px;
    }

    .article-hero-content {
        max-width: 610px;
    }

    .article-content--wrapper {
        gap: 60px;
        padding-top: 86px;
        padding-bottom: 90px;
    }

    .article-content-left-col {
        width: calc(67.34% - 30px);
    }

    .article-content-right-col {
        width: calc(32.66% - 30px);
        padding: 30px 20px;
    }

    .article-content-left-col p {
        font-size: 23px;
    }

    .article-content-left-col h3 {
        font-size: 27px;
    }

    .article-content-left-col h4 {
        font-size: 32px;
    }

    .article-content-left-col h4 {
        font-size: 22px;
    }

    .article-content-left-col table th {
        padding: 20.5px 20px;
    }

    .article-content-left-col table td {
        padding: 19px 20px;
    }

    .article-content-left-col ul li {
        font-size: 19px;
    }

    .article-content-left-col ul li:after {
        top: 11px;
    }

    .article-img-box .article-content-img {
        flex: unset;
    }

    .article-content-left-col blockquote {
        font-size: 32px;
        margin-top: 75px;
    }

    #faq h2 {
        margin-bottom: 40px;
    }

    .article-content-left-col .article-info .article-info-box+p {
        font-size: 16px;
        max-width: 442px;
    }

    .author-box {
        width: 65px;
        height: 65px;
        font-size: 33px;
    }

    .author-info span {
        font-size: 13px;
    }

    .author-info h3 {
        font-size: 20px;
    }

    html body .article-content-left-col .article-info-box .author-info p {
        font-size: 16px;
    }

    .article-content-left-col>div:not(:last-child) {
        padding-bottom: 76px;
    }

    .article-content-right-col ul li a {
        gap: 14px;
        font-size: 19px;
    }

    .related-article--wrapper {
        padding: 0;
    }

    .article-main--wrapper .article-content-left-col h2 {
        font-size: 40px;
    }

    .article-content-left-col .shape-box h4 {
        font-size: 22px;
    }

    article .article-content-left-col .shape-box p {
        font-size: 20px;
        margin-top: 7px;
    }

    .article-content-left-col .shape-box h4:after {
        width: 18px;
        height: 18px;
        top: 3px;
    }

    .quote-content span {
        font-size: 22px;
        margin-top: 22px;
    }

    article .article-content-left-col .img-with-text p {
        max-width: 500px;
        font-size: 20px;
    }

    .article-content-left-col .img-with-text {
        margin-top: 75px;
    }

    .article-img {
        margin-top: 80px;
    }

    /* ============================================= Stress-Free Website Redesign Checklist ============================================= */
    .article-redesign-hero--wrapper h1 {
        font-size: 104px;
    }

    .article-intro--wrapper {
        padding: 126px 0 150px;
    }

    .article-intro--wrapper p:first-child {
        padding-right: 180px;
        margin-bottom: 30px;
    }

    .article-intro--wrapper p:nth-of-type(2) {
        padding-left: 180px;
    }

    .article-intro--wrapper p {
        font-size: 24px;
    }

    .icon-with-text li {
        font-size: 20px;
    }

    .icon-with-text li:after {
        width: 18px;
        height: 18px;
        top: 2px;
    }

    .sanity-checkbox h3 {
        font-size: 38px;
    }

    .sanity-checkbox p {
        font-size: 20px;
    }

    .redesign-img-box p {
        margin: 35px 0 0;
        font-size: 20px;
    }

    .effective-design-right-col {
        padding-top: 90px;
    }

    .bulit-box h3 {
        font-size: 26px;
        margin-bottom: 24px;
        padding-bottom: 20px;
    }

    .bulit-box p {
        font-size: 20px;
    }

    .what-bulit--wrapper .row .col-4:nth-child(2) {
        padding-top: 70px;
    }

    .what-bulit--wrapper .row .col-4:last-child {
        padding-top: 160px;
    }

    .launch-left-col h2 {
        max-width: 400px;
    }

    .checklist-blog--wrapper {
        padding: 100px 0 80px;
    }

    /* ============================================= Quick Local SEO Wins ============================================= */
    .article-seo-content h1 {
        font-size: 62px;
        max-width: 690px;
    }

    .article-seo-img {
        padding-bottom: 558px;
    }

    .quick-seo-intro--wrapper p {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .quick-seo-intro--wrapper h2 {
        font-size: 44px;
        max-width: 1100px;
        padding-top: 25px;
    }

    .key-pages-intro {
        gap: 70px;
        margin-top: 55px;
        margin-bottom: 62px;
    }

    .key-pages-intro>* {
        width: calc(50% - 35px);
    }

    .lp-service--wrapper .launch-left-col h2 {
        max-width: 100%;
    }

    .navbar-expand-lg .navbar-nav .nav-link span::after {
        bottom: 40px;
    }
    /* ============================================= 404 ============================================= */
    .not-found-content h1 {
        font-size: 68px;
    }
    .not-found-content p {
        font-size: 22px;
        margin-bottom: 40px;
    }
    .not-found-main--wrapper {
        padding: 310px 0 150px 0;
    }
}

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

    /* Mission */
    .mission-content {
        max-width: 970px;
    }

    /* About */
    .about-heading {
        min-width: 891px;
    }
}

@media screen and (min-width:1200px) {

    .about-cta--wrapper h2 br,
    .stats--wrapper h2 br {
        display: none;
    }
}