@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.1;
    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.1);
    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.2;
    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:not(:last-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) 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: -0.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.1;
    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.1;
    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.1;
    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.1;
    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.4;
    padding-left: 21px;
  }

  .breakdown-right-col li {
    font-size: 18px;
    line-height: 1.4;
    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;
  }

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

  .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.1;
    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 input#date {
    padding: 14px 0;
  }

  input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    padding-left: 14px;
  }

  input[type="date"]::-webkit-datetime-edit {
    text-align: left;
  }

  input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    justify-content: flex-start;
  }

  .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: -0.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.1;
    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.2;
    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: -0.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.5);
    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.2);
    backdrop-filter: blur(15px);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    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.6) 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.6) 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.5);
    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.1;
    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: -0.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) 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) 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;
  }
}