/* ==========================================================================
   Responsive Styles
   Media queries ordered from larger devices to smaller devices.
   Each breakpoint appears only once; rules for the same breakpoint are merged.
   ========================================================================== */

/* ==========================================================================
   min-width queries (mobile-first overrides, largest -> smallest)
   ========================================================================== */

@media (min-width: 1400px) {}

@media (min-width: 992px) {
  .gallery-section {
    padding: 130px 40px;
  }

  .gallery-desc {
    font-size: 16px;
    line-height: 34px;
  }

  #contactModal .modal-lg,
  .modal-xl {
    --bs-modal-width: 714px;
  }
}

@media (min-width: 576px) {
  .gallery-section {
    padding: 64px 24px 0;
  }
}

/* ==========================================================================
   max-width queries (largest -> smallest)
   ========================================================================== */

@media (max-width: 1440px) {
  .standee-big {
    margin-right: 32px;
  }

  /* Home Page — Fluid Typography (1440px → smallest mobile) */
  .about-section.secGap.hero_about .content-wrapper .content p {
    line-height: 34px;
  }

  /* Hero headline */
  .hero_home .hero-content h1 {
    font-size: clamp(34px, 5vw, 72px);
    line-height: 1.1;
  }

  /* Section headings (.title) across all Home sections */
  .hero_home .title,
  .about-section.hero_about .title,
  .event-printing-section .title,
  .printing-slider-section .title,
  .creative-services .title,
  .gallery-section .title,
  .testimonial-section .title,
  .industry-slider-sec .title,
  .cta-section .title {
    font-size: clamp(28px, 4vw, 58px);
    line-height: 1.15;
  }

  /* Hero sub-heading + intro copy */
  .hero_home h4 {
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.25;
  }

  .hero_home p,
  .hero_home .wrap ul li {
    font-size: clamp(15px, 1.15vw, 16px);
    line-height: 1.7;
  }

  .hero_home .wrap ul li::first-letter {
    font-size: clamp(16px, 1.3vw, 18px);
  }

  /* Section description paragraphs */
  .about-section.hero_about .content p,
  .event-desc,
  .printing-desc,
  .creative-services .top-content p,
  .industry-desc,
  .testimonial-section .desc,
  .cta-box p {
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.8;
  }

  /* Card / component headings */
  .creative-services .service-card h4 {
    font-size: clamp(16px, 1.6vw, 22px);
  }

  .printing-card h5,
  .industry-content h4 {
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.4;
  }

  .about-section {
    .content p {
      font-size: 16px;
    }
  }

  .tp-intro p {
    font-size: 16px;
  }

  .team-section {
    .section-desc {
      font-size: 16px;
    }
  }

  .industry-content p,
  .testimonial-content p,
  .testiSlider .client-info h5 {
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.6;
  }

  /* About page — reduced headings */
  body {
    font-size: 16px;
  }

  .title {
    font-size: 48px;
    line-height: 56px;
  }

  .hero-content h1 {
    font-size: 66px;
  }

  .hero-content p {
    font-size: 16px;
    line-height: 30px;
  }

  .cpe-card-inner p {
    font-size: 19px;
  }

  .info-box h3 {
    font-size: 28px;
  }

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

  .content p {
    font-size: 19px;
  }

  .feature h4 {
    font-size: 22px;
  }

  .feature p {
    font-size: 16px;
  }

  .section-desc {
    font-size: 19px;
  }

  .team-content h4 {
    font-size: 21px;
  }

  .team-content p {
    font-size: 21px;
  }

  .impression-section {
    .info-box {
      background: #faf6f0;
      padding: 47px 47px 51px;
      max-width: 543px;
    }

    & .c-row {
      & .info-box:last-child {
        max-width: 497px;
        padding: 49px 40px 49px 40px;
      }
    }
  }

  .banner_pic {
    & .squareImg {
      position: absolute;
      max-width: 367px;
      height: 227px;
    }
  }

  .creative-slider .creative-active .service-card {
    max-width: 100%;
  }

  .creative-slider .swiper-slide .service-card {
    max-width: 100%;
    width: 100%;
  }

  .creative-slider .swiper-slide-active.swiper-slide .service-card {
    max-width: 100%;
    width: 100%;
  }

  /* Do NOT override the slide width here. Swiper assigns each slide an equal
     inline width and positions the following slides from that value, so
     widening the 3rd slide pushes the 4th past the container edge and clips it.
     The "enlarged" treatment comes from the inner .image height instead. */
  .creative-slider .creative-active {
    /* width: auto !important; */
  }

  /* Header + hero + footer scaling */
  header {
    padding: 30px 0;
    background: #f4eadb;

    .logo {
      width: 150px;
    }

    .stellarnav ul {
      padding: 15px 25px;
      max-width: 720px;
    }

    .stellarnav>ul>li>a {
      font-size: 16px;
    }

    .right_btn {
      max-width: 130px;
      height: 35px;

      a {
        font-size: 18px;
        gap: 8px;

        span {
          width: 22px;
          height: 22px;
        }
      }
    }

    &.sticky {
      padding: 10px 0;

      .stellarnav ul {
        padding: 10px 22px;
        max-width: 680px;

        li>a {
          font-size: 14px;
        }
      }

      .service-prev,
      .service-next {
        width: 54.42px;
        height: 47.42px !important;
        flex: 0 0 47.42px;
      }

      .creative-slider .slider-navigation {
        img {
          width: 19px;
        }
      }

      .right_btn {
        max-width: 100px;
        height: 35px;

        a {
          font-size: 14px;
          gap: 5px;

          span {
            width: 14px;
            height: 14px;
          }
        }
      }

      .logo {
        width: 90px;
      }
    }
  }

  .circle-gallery,
  .small-circle {
    width: 473px;
    height: 473px;
    margin-left: auto;
  }

  .big-circle {
    max-width: 344px;
    height: 344px;
  }

  .hero_home {
    h4 {
      margin-bottom: 20px;
    }

    .hero_btn {
      display: flex;
      gap: 15px;
      margin-top: 25px;
      margin-bottom: 30px;
    }

    .hero_flower {
      width: 100%;
      max-width: 250px;
    }
  }

  .btn-transparent,
  .theme-btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  .about-section.hero_about.secGap {
    padding: 60px 0;

    .content p {
      font-size: clamp(15px, 1.35vw, 18px) !important;
      margin-bottom: 20px;
    }
  }

  .about-section.hero_about {
    .hero-divider {
      max-width: 570px;
    }

    .bg-box {
      height: 423px;
      background: #fbf5ee;
      bottom: -30px;
    }

    .about_fire {
      height: 136px;
      width: 133px;
      top: -43px;
      right: 41px;
      z-index: 3;
    }

    .image-frame {
      max-width: 380px;

      img {
        max-width: 360px;
        height: 411px;
      }
    }
  }

  .industry-content h4 {
    line-height: 1.5;
  }

  .industry-desc {
    margin: 11px auto 35px;
  }

  .top-content .left {
    max-width: 880px;
  }

  .standee-big {
    max-width: 288px;
    min-height: 470px;
  }

  .printer {
    max-width: 533px;
    height: auto;
  }

  .standee-small {
    width: 100%;
    max-width: 198px;
    height: 334px;
    margin-bottom: 30px;
    margin-left: 30px;
    min-height: auto;
  }

  .shape-bg {
    max-width: 699px;
    height: 406px;
    clip-path: polygon(94% 9%, 100% 25%, 19% 90%, -36% 72%);
    right: 7%;
    bottom: 50px;
    z-index: 1;
    opacity: 0.9;
  }

  .event_flower {
    width: 150px;
    height: 150px;
    top: 21%;
  }

  .style-1.gallery-item {
    height: 360px;
    width: 350px;
  }

  .style-2.gallery-item {
    height: 250px;
    width: 300px;
  }

  .style-3.gallery-item {
    height: 250px;
    width: 240px;
  }

  .style-4.gallery-item {
    height: 256px;
    width: 235px;
  }

  .style-5.gallery-item {
    height: 370px;
    width: 310px;
  }

  .style-6.gallery-item {
    height: 255px;
    width: 200px;
  }

  .style-6.gallery-item {
    height: 395px;
    width: 310px;
  }

  .style-7.gallery-item {
    height: 450px;
    width: 300px;
  }

  .gallery-zigzag-grid {
    gap: 15px;
    max-width: 1140px;
  }

  .industry-slider-sec {
    padding: 80px 0px 65px;

    .industry-flower {
      width: 240px;
    }
  }

  .industry-card img {
    height: 210px;
  }

  .cta-section {
    padding: 60px 0 80px;
  }

  .theme-btn {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }

  .footer-logo {
    width: 130px;
    margin: 0 0 20px;
  }

  .footer-socials a {
    width: 40.55px;
    height: 40.55px;
  }

  .footer-socials svg {
    width: 20px;
    height: 20px;
  }

  .footer-title {
    margin: 0 0 5px;
    font-size: 24px;
  }

  .footer-links a,
  .footer-contact,
  .footer-contact a {
    color: #fbf5ee;
    font-size: 14px;
  }

  /* .site-footer {
    &::after {
      right: 47px;
    }
  } */

  .footer-form input,
  .footer-form button {
    height: 40px;
    font-size: 14px;
  }

  .footer-form input {
    padding: 0 15px;
  }

  .footer-bottom {
    margin-top: 10px;
    font-size: 13px;
    line-height: 2.5;
    height: 30px;
  }

  .cta-box {
    .fire {
      width: 380px;
    }
  }

  .industry-prev,
  .industry-next {
    width: 50px;
    height: 50px;
  }

  .industry-nav {
    margin-top: 20px;
  }

  .swiper-outer {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
  }

  .testiSlider {
    .swiper-outer {
      max-width: 1140px;
      width: 100%;
      margin: 0 auto;
      overflow-x: hidden;
    }
  }

  .banner_pic {
    width: 54%;
  }

  .standee-small {
    height: 497px;
  }

  .event_flower {
    width: 271px;
    height: 166px;
    top: 9%;
    left: 57%;
  }

  .testiSlider {
    .divider {
      margin-top: 15px;
    }
  }

  .testimonial-section {
    .swiper-pagination {
      margin-top: 35px;
    }
  }

  /* .testimonial-section {
    padding: 41px 0 20px;
  } */

  #gallery .title {
    margin-bottom: 75px;
  }

  #gallery {
    padding: 96px 0;
  }

  .printing-slider-section {
    padding: 50px 0 99px;
  }

  .printing-slider-section {
    padding-top: 0;
  }

  .shape-bg {
    clip-path: polygon(42% -2%, 94% 9%, 14% 96%, 0 37%);
  }

  /* .about-section.hero_about .content p,
  .event-desc,
  .printing-desc,
  .creative-services .top-content p,
  .industry-desc,
  .testimonial-section .desc,
  .cta-box p {
    max-width: 701px;
    margin: 0 auto 30px auto;
  } */

  .cta-box {
    .fire {
      position: absolute;
      left: 60px;
      top: -26px;
      width: 421px;
      height: 209px;
      z-index: -1;
      width: 136px;
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 57.42px;
    height: 57.42px;
  }

  .team-section {
    & .slider-nav {
      img {
        width: 21px;
      }
    }
  }

  .vehicle-wrap {
    .content p {
      font-size: 16px;
    }

  }

  .stickyHeading p,
  .gallery-heading p {
    font-size: 16px;
  }

  .printing-slider-section.service .col-lg-12 .printing-desc {
    font-size: 16px;
  }

  .tp-card-quote {
    font-size: 16px;
  }

  .tp-intro p {
    font-size: 16px;
  }

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

  .service-prev,
  .service-next {
    position: static;
    width: 50.42px;
    height: 50.42px !important;
    flex: 0 0 50.42px;
    border: 0.91px solid #ee8c13;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b3742f;
    font-size: 18px;
    cursor: pointer;
    margin: 0;
    transition: 0.3s;
  }

  /* img {
    width: 23px;
} */
  .industry-nav {
    img {
      width: 21px;
    }
  }

  .team-section {

    .swiper-button-next,
    .swiper-button-prev {
      width: 50.42px;
      height: 50.42px;
    }
  }

  .why-us {
    & .icon-circle {
      img {
        width: 46px;
      }
    }
  }

  .printing-slider-section.service .printingSlider {
    & .slider-nav {
      img {
        width: 21px;
      }
    }
  }

  .printing-slider-section.service .printingSlider {

    .swiper-button-next,
    .swiper-button-prev {
      width: 50.42px;
      height: 50.42px;
    }
  }
}

@media (max-width: 1366px) {

  .cta-box {
    .fire {
      position: absolute;
      left: 60px;
      top: -39px;
      width: 421px;
      height: 209px;
      z-index: -1;
      width: 203px;
    }
  }

  .event-desc,
  .printing-desc,
  .creative-services .top-content p,
  .industry-desc,
  .testimonial-section .desc,
  .cta-box p {
    padding-bottom: 30px;
  }

  .creative-services {
    padding-bottom: 41px;
  }

  .creative-services .top-content {
    margin-bottom: 12px;
  }

  /* 
  .about-section.hero_about .content p,
  .event-desc,
  .printing-desc,
  .creative-services .top-content p,
  .industry-desc,
  .testimonial-section .desc,
  .cta-box p {
    max-width: 701px;
    margin: 0 auto;
  } */

  .creative-slider .slider-navigation {
    margin-top: -56px;
  }

  /* #gallery {
    padding: 73px 0;
  } */

  .circle-gallery,
  .small-circle {
    width: 435px;
    height: 435px;
  }

  .big-circle {
    max-width: 320px;
    height: 320px;
  }

  .standee-small {
    height: 401px;
  }

  .impression-section {
    .orange-ribbon {
      position: absolute;
      left: 25%;
      top: -107px;
      max-width: 377px;
      width: 100%;
      height: 472px;
      z-index: 20;
    }
  }

  .about-section.hero_about {
    .about_fire {
      top: -43px;
      right: 3px;
    }
  }


  .standee-big {
    max-width: 227px;
    min-height: 470px;
  }

  .printer {
    max-width: 449px;
    height: auto;
  }

  .standee-big {
    margin-right: 12px;
  }

  .shape-bg {
    clip-path: polygon(67% 19%, 98% 30%, 17% 111%, 0 51%);
  }

  /* Creative services slider: every slide fills the width Swiper allocated to
     it, so all 4 slides fit. Cards must not carry fixed pixel widths here —
     that leaves them narrower than their slot and misaligns the row. */
  .creative-slider .creative-active {
    /* width: auto !important; */
  }

  .creative-slider .swiper-slide .service-card,
  .creative-slider .creative-active .service-card,
  .creative-services .swiper-slide-active.swiper-slide .service-card,
  .creative-slider .swiper-slide-active.swiper-slide .service-card {
    max-width: 100%;
    width: 100%;
  }

  .creative-slider .creative-active .image {
    height: 340px !important;
  }

  .creative-slider .swiper-slide .service-card .image {
    height: 250px;
  }

  .creative-slider .swiper-slide-active.swiper-slide .image {
    height: 250px !important;
  }

  .creative-slider.swiper .swiper-wrapper {
    min-height: 420px;
  }


}

@media (max-width: 1280px) {
  .hero_home .hero_flower {
    left: 38%;
  }

  .about-section.secGap.hero_about .content-wrapper .content p {
    margin-bottom: 0px;
  }

  .shape-bg {
    clip-path: polygon(95% 19%, 114% 24%, 17% 128%, 0 66%);
  }

  .about-section.hero_about .content p,
  .event-desc,
  .printing-desc,
  .creative-services .top-content p,
  .industry-desc,
  .testimonial-section .desc,
  .cta-box p {
    padding-bottom: 0px;
  }

  .about-section.hero_about {
    .about_fire {
      top: -45px;
      right: 25px;
    }
  }

  /* .cta-box {
    .fire {
      position: absolute;
      left: -77px;
      top: -81px;
      width: 421px;
      height: 309px;
      z-index: -1;
      width: 347px;
    }
  } */

  .hero-section.hero_home .hero_flower img {
    width: 220px;
  }

  .circle-gallery,
  .small-circle {
    width: 400px;
    height: 400px;
  }

  .big-circle {
    max-width: 294px;
    height: 294px;
  }

  .about-section.hero_about .image-frame {
    max-width: 340px;
  }

  .about-section.hero_about .image-frame img {
    max-width: 100%;
    height: 370px;
  }

  .about-section.hero_about .bg-box {
    height: 380px;
  }

  .standee-big {
    max-width: 200px;
    min-height: 420px;
  }

  .standee-small {
    max-width: 165px;
    height: 350px;
  }

  .printer {
    max-width: 400px;
  }

  .event_flower {
    width: 220px;
    height: 140px;
  }

  .gallery-zigzag-grid {
    max-width: 100%;
    gap: 14px;
  }

  .cta-box {
    padding: 33px 60px 34px 310px;
  }
}

@media (max-width: 1200px) {
  .section-heading h2 {
    font-size: 52px;
  }

  .cta-box {
    .fire {
      position: absolute;
      left: 60px;
      top: -27px;
      width: 421px;
      height: 209px;
      z-index: -1;
      width: 131px;
    }
  }

  .title {
    font-size: 40px;
    line-height: 1;
  }

  .stellarnav>ul:nth-child(2) li>a {
    padding-left: 15px;
  }

  .stellarnav {
    width: auto;
  }

  .mb-5 {
    margin-bottom: 1.2rem !important;
  }

  header {
    & .stellarnav>ul>li>a {
      font-size: 14px;
    }
  }

  .content p {
    font-size: 19px;
  }

  .style-1.gallery-item {
    height: 200px;
    width: 210px;
  }

  .style-2.gallery-item {
    height: 150px;
    width: 200px;
  }

  .style-5.gallery-item {
    height: 240px;
    width: 200px;
  }

  .style-7.gallery-item {
    height: 240px;
    width: 200px;
  }

  .style-7.gallery-item {
    height: 300px;
    width: 200px;
  }

  .style-6.gallery-item {
    height: 275px;
    width: 210px;
  }

  .service-prev,
  .service-next {
    width: 52.42px;
    height: 52.42px !important;
    flex: 0 0 52.42px;
  }

  .team-section {

    & .swiper-button-next,
    & .swiper-button-prev {
      width: 52.42px;
      height: 52.42px !important;
      flex: 0 0 52.42px;
    }

    & .slider-nav {
      margin-top: 25px;
    }

    & .team-image img {
      width: 100%;
      max-width: 352px;
      height: 200px;
    }
  }

  .creative-slider .slider-navigation {
    img {
      width: 28px;
    }
  }

  .creative-slider .slider-navigation {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .creative-slider .slider-navigation {
    margin-top: -90px;
  }

  /* Reduce top/bottom section spacing from 1200px down */
  .secGap {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .secGap2 {
    padding-top: 70px;
    padding-bottom: 45px;
  }

  /* Reduce inner-page heading & paragraph font sizes from 1200px down */
  .hero-content h1 {
    font-size: 52px;
  }

  .contact-title {
    font-size: 38px;
  }

  .vehicle-wrap .section-heading h2 {
    font-size: 40px;
  }

  .printing-section .title,
  .printing-section h3,
  .printing-section .printing-section h3 {
    font-size: 24px;
  }

  .info-box h3,
  .impression-section .info-box h3,
  .contact-form h3 {
    font-size: 23px;
  }

  .impression-section .info-box h3 {
    font-size: 23px;
  }

  .why-us .feature h4 {
    font-size: 18px;
  }

  .team-content h4,
  .team-content p {
    font-size: 16px;
  }

  .blog-content h3 {
    font-size: 14px;
  }

  .contact-item h6 {
    font-size: 15px;
  }

  .hero-content p,
  .cpe-wrap .cpe-card-inner p,
  .about-section .content p,
  .team-section .section-desc,
  .printing-section p,
  .contact-text,
  .vehicle-wrap .content p,
  .stickyHeading p,
  .gallery-heading p {
    font-size: 15px;
  }

  .impression-section .info-box p,
  .printing-section .blog-pagination-section p {
    font-size: 14px;
  }

  .why-us .feature p {
    font-size: 13px;
  }

  .cta-section {
    padding-top: 80px;
    padding-bottom: 90px;
  }

  .industry-slider-sec {
    padding-top: 110px;
    padding-bottom: 45px;
  }

  .gallery-section {
    padding-top: 32px;
    padding-bottom: 0;
  }

  .creative-services {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .testimonial-section {
    padding-top: 60px;
    padding-bottom: 14px;
  }

  .printing-slider-section {
    padding-top: 34px;
    padding-bottom: 35px;
  }

  .serviceGallery .style-1.gallery-item {
    height: 329px;
    width: 509px;
  }

  .serviceGallery .style-2.gallery-item {
    height: 329px;
    width: 408px;
  }

  .serviceGallery .gallery-column.offset-down {
    & .style-1.gallery-item {
      height: 267px;
      width: 336px;
      top: 62px;
    }

    & .style-4.gallery-item {
      height: 264px;
      width: 259px;
      margin-left: inherit;
    }

    & .style-5.gallery-item {
      height: 217px;
      width: 256px;
      position: relative;
      top: -22px;
    }
  }

  .serviceGallery .gallery-column.offset-up {
    & .style-2.gallery-item {
      height: 359px;
      width: 446px;
    }
  }

  .serviceGallery .gallery-column.offset-up {
    & .style-1.gallery-item {
      height: 247px;
      width: 300px;
      left: 110px;
      top: -50px;
    }
  }

  .vehicle-wrap {
    & .image-card img {
      width: 100%;
      max-width: 324px;
      height: 215px;
    }
  }
}

@media (max-width: 1199px) {
  .hero-content h1 {
    font-size: 60px;
  }

  .footer-logo-col {
    width: 100%;
    text-align: center;
    margin-bottom: 35px;
  }

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

  .hero-content p {
    font-size: 17px;
  }

  .hero-divider {
    width: 320px;
  }

  .banner_pic {
    width: 50%;
  }

  .banner_pic {
    & .squareImg {
      max-width: 280px;
      height: 180px;
    }
  }

  .cpe-wrap {
    & .cpe-card {
      min-height: 351px;
    }

    & .cpe-photo-left {
      margin-top: 39px;
    }

    & .cpe-divider {
      margin-top: -83px;
    }
  }

  .impression-section {
    & .info-box {
      background: #faf6f0;
      padding: 47px 47px 51px;
      max-width: 443px;
    }

    & .c-row {
      & .info-box:last-child {
        max-width: 407px;
        padding: 49px 40px 49px 40px;
      }
    }

    & .orange-ribbon {
      position: absolute;
      left: 22%;
      top: -108px;
      max-width: 375px;
      width: 100%;
      height: 492px;
      z-index: 20;
    }
  }

  .hero_home .hero_flower {
    left: 34%;
  }

  .hero-section.hero_home .hero_flower img {
    width: 180px;
  }

  .circle-gallery,
  .small-circle {
    width: 360px;
    height: 360px;
  }

  .big-circle {
    max-width: 264px;
    height: 264px;
  }

  /* Testimonial: shrink the reserved quote gutter so the orange panel fits */
  .testiSlider .testimonial-card {
    padding: 30px;
    padding-left: 200px;
    min-height: 300px;
  }

  .testiSlider .testimonial-content {
    max-width: 440px;
    flex: 0 0 440px;
  }

  .testiSlider .quote-bg {
    left: 30px;
    top: 36px;
  }

  .testiSlider .quote-bg img {
    height: 70px;
  }

  .testiSlider .rating {
    left: 30px;
    bottom: 30px;
  }

  .cta-box {
    padding: 30px 40px 30px 170px;
  }

  /* .cta-box .fire {
    left: -110px;
    top: -58px;
    width: 250px;
  } */
  .cta-box {
    .fire {
      position: absolute;
      left: 20px;
      top: -23px;
      width: 421px;
      height: 209px;
      z-index: -1;
      width: 118px;
    }
  }

  .cta_span {
    &::after {
      width: 16px;
      height: 24px;
    }
  }

  .hero_home .title,
  .about-section.hero_about .title,
  .event-printing-section .title,
  .printing-slider-section .title,
  .creative-services .title,
  .gallery-section .title,
  .testimonial-section .title,
  .industry-slider-sec .title,
  .cta-section .title {
    font-size: clamp(28px, 5vw, 58px);
    line-height: 1.15;
  }

  .cta_span {
    font-size: 1.5em;
    line-height: 1;
  }
}

@media (max-width: 992px) {
  .secGap {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .secGap2 {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  /* Further reduce inner-page heading & paragraph font sizes */
  .hero-content h1 {
    font-size: 44px;
  }

  .contact-title {
    font-size: 34px;
  }

  .vehicle-wrap .section-heading h2 {
    font-size: 34px;
  }

  .printing-section .title,
  .printing-section h3,
  .info-box h3,
  .impression-section .info-box h3,
  .contact-form h3 {
    font-size: 21px;
  }

  .why-us .feature h4,
  .team-content h4,
  .team-content p {
    font-size: 16px;
  }

  .hero-content p,
  .cpe-wrap .cpe-card-inner p,
  .about-section .content p,
  .team-section .section-desc,
  .printing-section p,
  .contact-text,
  .vehicle-wrap .content p,
  .stickyHeading p,
  .gallery-heading p {
    font-size: 15px;
  }

  .left-panel h2 {
    font-size: 40px;

    br {
      display: none;
    }
  }

  .why-us {
    & .right-panel {
      color: #fff;
      padding: 40px 0;
    }

    & .feature {
      margin-bottom: 30px;
    }
  }

  .feature h4 {
    font-size: 22px;
  }

  .right-panel {
    padding: 40px;
  }

  .mt-100 {
    margin-top: 30px;
  }

  .impression-section {
    & .info-box {
      background: #faf6f0;
      padding: 25px;
      max-width: 49%;
      text-align: center;
    }

    & .c-row {
      padding: 0 25px;
      gap: 0 10px;

      & .info-box:last-child {
        max-width: 49%;
        padding: 25px;
      }
    }

    & .c-row {
      & .info-box:first-child {
        margin-top: 20px;
      }
    }
  }

  .impression-section {
    & .right-box {
      margin-left: 0;
    }
  }

  .impression-section {
    & .left-box {
      margin-right: 0px;
    }
  }

  .about-section {
    & .content p {
      margin-bottom: 30px;
    }
  }

  .g-5,
  .gy-5 {
    --bs-gutter-y: 1rem;
  }
}

@media (max-width: 991.98px) {
  .header.sticky .stellarnav {
    right: 16%;
    top: 2px;
  }

  header {
    &.sticky {
      & .stellarnav ul {
        border-color: transparent;

        & li>a {
          padding: 15px 0px;
          font-size: 14px;
        }
      }
    }
  }

  .stellarnav ul ul.menu_child {
    & li {
      & a {
        font-size: 13px;
        color: #fff;
      }
    }
  }

  .stellarnav ul ul.menu_child {
    padding: 0 15px 0 14px;
    height: 299px;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
  }

  .stellarnav.mobile ul {
    position: relative;
    display: none;
    text-align: left;
    background: rgba(0, 0, 0, 1);

    a {
      color: #fff;
    }
  }

  .hero_home.service_hero {
    .hero-content {
      text-align: left;
      margin: auto;
    }

    .hero-divider {
      margin: 0 0 22px;
      width: 50%;
    }

    & .hero_flower {
      display: none;
    }
  }

  .banner_pic {
    width: 71%;
  }

  .site-footer {
    padding-top: 44px;
  }

  header .container {
    position: relative;
  }

  .stellarnav {
    width: auto;
    position: absolute !important;
    right: 15%;
    top: 18px;
  }

  .footer-logo {
    margin-bottom: 18px;
  }

  .gallery-zigzag-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .gallery-column.offset-down,
  .gallery-column.offset-up {
    margin-top: 0;
  }

  .style-1.gallery-item,
  .style-2.gallery-item,
  .style-4.gallery-item,
  .style-3.gallery-item,
  .style-5.gallery-item,
  .style-6.gallery-item,
  .style-7.gallery-item {
    height: 300px;
    width: 33.333%;
    margin: 0 0 30px !important;
  }

  .gallery-column {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .gallery-zigzag-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }

  .gallery-column.offset-up {
    margin-top: 0px;
    position: relative;
    left: 0px;
  }

  .footer-contact-col {
    width: 90%;
  }

  .footer-links-col,
  .footer-services-col {
    width: 45%;
    margin-bottom: 30px;
  }

  .footer-form {
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
    display: flex;
    gap: 20px;
    margin-top: 28px;
    margin-bottom: 20px;
  }

  .footer-form input,
  .footer-form button {
    height: 51px;
    font-size: 14px;
  }

  .footer-form button {
    border: none;
  }

  .footer-form button {
    margin-top: 0;
  }

  /* .site-footer {
  &::after {
    right: 105px;
    top: 26px;
    width: 221px;
    height: 166px;
    background-size: contain;
    right: 93px;
  }
} */
}

@media (max-width: 991px) {
  .section-title {
    font-size: 42px;
  }

  .stellarnav .dd-toggle {
    width: 23px;
    height: 35px;
  }

  /* .site-footer {
    & .darkbox {
      &::after {
        position: absolute;
        content: "";
        right: -55px;
        top: -102px;
        background: url(../img/yellow-fire.png) no-repeat;
        width: 421px;
        height: 346px;
        z-index: 1;
      }
    }
  } */
  .about-section.secGap.hero_about .content-wrapper .content .title::after {
    left: 0;
    width: 50%;
    right: 0;
    margin: 0 auto;
  }

  .cta-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .stellarnav a.dd-toggle .icon-plus {
    height: 100%;
  }

  .stellarnav.mobile.left .close-menu,
  .stellarnav.mobile.right .close-menu {
    padding-right: 0;
  }

  .cta-box {
    .fire {
      display: none;
    }
  }

  .related-blog-section .slider-nav {
    margin-top: 20px;
  }

  .vehicle-wrap {
    text-align: center;
    padding-bottom: 0 !important;
  }

  .vehicle-wrap {
    & .divider {
      margin-bottom: 20px;
      margin-top: 20px;
    }
  }

  .printing-section {
    & .service-menu a {
      font-size: 16px;
      padding: 10px 20px;
    }

    & .custom-pagination a {
      width: 40px;
      height: 40px;
      font-size: 14px;
    }

    & .custom-pagination {
      gap: 6px;
      margin-top: 25px;
      flex-wrap: wrap;
    }
  }

  .serviceGallery .style-1.gallery-item,
  .serviceGallery .style-2.gallery-item,
  .serviceGallery .gallery-column.offset-down .style-1.gallery-item,
  .serviceGallery .gallery-column.offset-down .style-4.gallery-item,
  .serviceGallery .gallery-column.offset-down .style-5.gallery-item,
  .serviceGallery .gallery-column.offset-up .style-1.gallery-item,
  .serviceGallery .gallery-column.offset-up .style-2.gallery-item {
    height: 229px;
    width: 50%;
    top: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    padding: 0 1% 2%;
  }

  .serviceGallery .gallery-zigzag-grid {
    display: grid;
    grid-template-columns: 100%;
    gap: 0;
  }

  .serviceGallery .gallery-column {
    gap: 0px;
  }

  .serviceGallery .gallery-column.offset-down .style-1.gallery-item,
  .serviceGallery .gallery-column.offset-down .style-4.gallery-item,
  .serviceGallery .gallery-column.offset-down .style-5.gallery-item {
    width: 33.333%;
  }

  .vertical-line {
    min-height: 320px;
  }

  .content p {
    line-height: 1.8;
  }

  .image-area {
    margin-top: 20px;
  }

  .left-box,
  .right-box {
    margin: 0;
  }

  .orange-ribbon {
    display: none;
  }

  .info-box {
    padding: 45px 30px;
  }

  .cpe-photo-left,
  .cpe-photo-right {
    margin-top: 0;
    height: 220px;
  }

  .cpe-card {
    margin-top: 24px;
    min-height: auto;
  }

  .hero-section {
    padding: 60px 0;
  }

  .hero-content {
    text-align: center;
    margin: auto;
  }

  .hero-content h1 {
    font-size: 48px;
  }

  .hero-divider {
    margin: 0 auto 22px;
    width: 260px;
  }

  .hero-content p {
    margin: 0 auto 30px;
  }

  .hero-art {
    margin-top: 35px;
    text-align: center;
  }

  .hero-art img {
    max-width: 200px;
    transform: none;
  }

  /* Contact */
  .contact-title {
    font-size: 46px;
  }

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

  .form-wrapper {
    margin-top: 30px;
  }

  .brush {
    display: none;
  }

  /* Blog */
  .blog-image img {
    height: 220px;
  }

  .printing-card h5,
  .industry-content h4 {
    min-height: 50px;
  }

  /* Related Blog */
  .related-blog-section {
    padding: 0 0 50px 0;
  }

  .related-blog-section .swiper-button-next,
  .related-blog-section .swiper-button-prev {
    width: 52.42px;
    height: 52.42px;
  }

  .printing-slider-section.service .printingSlider {

    .swiper-button-next,
    .swiper-button-prev {
      width: 52.42px;
      height: 52.42px;
    }
  }

  .related-blog-section .section-title {
    font-size: 46px;
  }

  /* Service */
  .service-menu {
    margin-top: 50px;
  }

  /* Vehicle / Service Details */
  .section-heading {
    text-align: center;
  }

  .section-heading h2 {
    font-size: 46px;
    margin: auto;
  }

  .flower {
    display: none;
  }

  .image-card {
    margin: auto;
  }

  .content {
    text-align: center;
  }

  /* CTA */
  .cta-box {
    padding: 45px 30px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .fire-shape {
    width: 120px;
    opacity: 0.8;
  }

  .cta-buttons {
    justify-content: center;
  }

  .cta-text {
    text-align: center;
  }

  /* Creative slider */
  .top-content {
    flex-direction: column;
  }

  .service-btn {
    margin-top: 15px;
  }

  .swiper-slide {
    width: 180px;
  }

  .service-card .image {
    height: 210px;
  }

  .creative-slider .creative-active .image {
    transform: scale(1.15);
  }

  .creative-slider .creative-active h4 {
    font-size: 24px;
  }

  /* Testimonial */
  .testimonialSwiper .swiper-slide {
    width: 90%;
  }

  .testimonial-card {
    height: auto;
    padding: 30px;
  }

  .testimonial-content {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 70px;
  }

  .quote-bg {
    left: 20px;
    font-size: 120px;
  }

  .rating {
    position: relative;
    left: auto;
    bottom: 0;
    margin-top: auto;
    display: flex;
    gap: 8px;

    img {
      width: 23px;
      height: 23px;
    }
  }

  /* Event printing */
  .event-printing-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    min-height: auto;
    gap: 25px;
  }

  .standee-big {
    width: 140px;
    margin: 0;
  }

  .standee-small {
    width: 95px;
    margin: 0;
    transform: none;
  }

  .printer {
    width: 100%;
    max-width: 500px;
  }

  .shape-bg {
    width: 300px;
    height: 170px;
    right: 50%;
    transform: translateX(50%);
    bottom: 80px;
  }

  .quote-btn {
    position: static;
    margin-top: 30px;
    width: 100%;
    text-align: center;
  }

  /* Printing card */
  .printing-card::after {
    display: none;
  }

  .printing-image {
    height: 180px;
  }

  .cpe-wrap .col-lg-4 {
    order: 1;
  }

  .cpe-wrap .col-lg-3 {
    order: 2;
  }

  .cpe-wrap .col-lg-5 {
    order: 3;
  }

  .cpe-wrap {
    & .cpe-photo-left {
      max-width: 100%;
      width: 100%;
      height: 100%;
      margin-top: 0;
    }

    & .cpe-photo-right {
      max-width: 100%;
      width: 100%;
      height: 100%;
      margin-top: 0;
    }

    & .cpe-divider {
      margin-top: 0;
    }
  }

  .cpe-card {
    margin-top: 0;
    min-height: auto;
  }

  .hero_home .hero-content,
  .hero_home .hero-content h1 {
    text-align: left;
  }

  .hero_home {
    & .wrap {
      .vertical-line {
        width: 1px;
        display: none;
        background: #6e2d03;
        height: 100%;
        margin-right: 28px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }

  .event-printing-section .event-item.standee-small {
    display: none;
  }

  .event-printing-section .position-absolute.event_flower {
    display: none;
  }

  .event-printing-section .event-item.standee-big {
    display: none;
  }

  .event-printing-section .event-item.printer {
    margin-top: 20px;
  }

  .creative-services .swiper-slide.creative-active .service-card .image {
    box-shadow: 0px 5.35px 32px 0px #ffffff00;
  }

  .creative-slider .image {
    &::before {
      position: absolute;
      background: rgb(0 0 0 / 0%);
    }
  }

  .hero_home .hero-content .hero-divider,
  .hero_home .hero-divider {
    margin-inline: auto;
    display: none;
  }

  .hero_home .hero_btn {
    flex-wrap: wrap;
    justify-content: left;
  }

  .hero_home .wrap {
    display: inline-block;
    text-align: left;
  }

  .hero_home .hero_flower {
    display: none;
  }

  /* Circle gallery: drop the fixed 629x600 box and scale with the column.
     `transform: scale()` is avoided here because it leaves the original
     height reserved, creating a large empty gap under the hero. */
  .circle-gallery {
    width: 100%;
    max-width: 460px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 40px auto 0;
  }

  .circle-wrapper {
    transform: none;
    width: 100%;
    height: 100%;
  }

  .big-circle {
    max-width: 68%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .small-circle {
    width: 96%;
    height: 96%;
    margin-left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(24deg);
  }

  /* About */
  .about-section.hero_about .image-area {
    margin-top: 30px;
  }

  .about-section.hero_about .about_fire {
    display: none;
  }

  /* .about-section.secGap.hero_about .content-wrapper .content .title::after {
    left: 0;
    width: 100%;
  } */

  /* Testimonial: stack the quote gutter above the orange panel */
  .testiSlider .testimonial-card {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 90px 24px 24px;
    min-height: auto;
  }

  .testiSlider .testimonial-content {
    max-width: 100%;
    flex: 1 1 auto;
    min-height: auto;
    margin-top: 0;
  }

  .testiSlider .quote-bg {
    left: 24px;
    top: 24px;
  }

  .testiSlider .quote-bg img {
    height: 56px;
  }

  #gallery .gallery-column {
    display: flex;
    flex-direction: row;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .gallery-item .testiSlider .rating {
    position: absolute;
    left: auto;
    right: 24px;
    top: 40px;
    bottom: auto;
  }

  .testiSlider .divider {
    margin-top: 20px;
    width: 120px;
  }

  /* CTA */
  .cta-box {
    padding: 30px 25px;
    text-align: center;
  }

  .cta-buttons {
    justify-content: center;
  }

  /* Creative services */
  .creative-services .top-content {
    align-items: center;
    text-align: center;
  }

  /* Breathing room under the button before the slider starts. */
  .creative-services .top-content>.theme-btn {
    margin-bottom: 24px;
  }

  .creative-services .top-content .left {
    max-width: 100%;
  }

  .creative-slider .slider-navigation {
    margin-top: -59px;
    height: auto;
    width: 100%;
    justify-content: center;
  }

  /* Industry slider */
  .industry-slider-sec {
    padding: 60px 0 45px;
  }

  .industry-slider-sec .industry-flower {
    width: 150px;
    opacity: 0.5;
  }

  .industry-slider-sec .swiper-slide {
    min-height: auto;
  }

  .industry-desc br,
  .testimonial-section .desc br,
  .printing-slider-section .title br,
  .gallery-section .title br,
  .testimonial-section .title br {
    display: none;
  }

  /* Gallery sticky heading can't stay fixed once items reflow to rows */
  .gallery-section .stickyHeading.is-fixed,
  .gallery-section .stickyHeading.is-bottom {
    position: static;
  }

  #gallery .title {
    margin-bottom: 35px;
  }

  .testimonial-section {
    padding-top: 3px;
    padding-bottom: 14px;
  }

  .testiSlider {
    .testimonial-content p {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: #fff;
    }
  }

  #gallery {
    padding: 50px 0;
  }

  .style-1.gallery-item,
  .style-2.gallery-item,
  .style-4.gallery-item,
  .style-3.gallery-item,
  .style-5.gallery-item,
  .style-6.gallery-item,
  .style-7.gallery-item {
    height: 250px;
    width: 33.333%;
    margin: 0 0 30px !important;
  }

  .swiper-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 28px);
  }
}

@media (max-width: 768px) {
  .left-panel {
    text-align: center;
  }

  .cta_span {
    &::after {
      width: 13px;
      height: 20px;
    }
  }

  .left-panel h2 {
    font-size: 40px;
  }

  .feature {
    flex-direction: column;
    text-align: center;
  }

  .icon-circle {
    margin: auto;
  }

  .right-panel {
    padding: 35px 25px;
  }

  .circle-wrapper {
    transform: scale(0.75);
  }
}

@media (max-width: 767px) {

  .g-5,
  .gy-5 {
    --bs-gutter-y: 1rem;
  }

  .g-5,
  .gx-5 {
    --bs-gutter-x: 1rem;
  }

  .impression-section {
    & .info-box {
      max-width: 100%;
    }

    & .c-row {
      & .info-box:last-child {
        max-width: 100%;
        padding: 25px;
      }
    }
  }

  .banner_pic {
    & .squareImg {
      max-width: 63%;
      height: 180px;
    }
  }

  .printing-card h5,
  .industry-content h4 {
    min-height: auto;
  }

  .service-menu {
    margin-top: 20px;
  }

  .section-title {
    font-size: 32px;
  }

  .stellarnav {
    width: auto;
    position: absolute !important;
    right: 19%;
    top: 18px;
  }

  .title {
    font-size: 33px;
    line-height: 1;
  }

  .blogDetail .hero-content p {
    margin-bottom: 50px;
    max-width: 978px;
  }

  .mb-5 {
    margin-bottom: 1rem !important;
  }

  .mt-4 {
    margin-top: 1rem !important;
  }

  .team-image img {
    height: 320px;
  }

  .content-wrapper {
    display: block;
  }

  .vertical-line {
    width: 100%;
    height: 3px;
    min-height: 3px;
    margin-bottom: 30px;
    margin-right: 0;
  }

  .vertical-line::before {
    display: none;
  }

  .bg-box {
    width: 90%;
    right: 0;
  }

  .quote-btn {
    width: 100%;
  }

  .hero-section {
    padding: 0px 0 50px;
  }

  .hero_home.service_hero {
    padding-bottom: 0;
  }

  .hero-content h1 {
    font-size: 36px;
    line-height: 1.15;
  }

  .hero-divider {
    width: 180px;
  }

  .hero-content p {
    font-size: 16px;
    line-height: 30px;
  }

  .theme-btn {
    padding: 14px 28px;
  }

  .hero-art img {
    max-width: 150px;
  }

  /* Contact */
  .contact-section {
    padding: 50px 0;
  }

  .contact-title {
    font-size: 36px;
  }

  .contact-form {
    padding: 30px 25px;
  }

  .contact-form h3 {
    font-size: 30px;
  }

  .contact-item h6 {
    font-size: 16px;
  }

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

  /* Blog */
  .blog-section {
    padding: 40px 0;
  }

  .blog-image img {
    height: 240px;
  }

  .blog-content {
    padding: 18px;
  }

  .blog-content h3 {
    font-size: 20px;
  }

  /* Related Blog */
  .related-blog-section .section-title {
    font-size: 36px;
    margin-bottom: 35px;
  }

  .blog-content h3 {
    font-size: 16px;
  }

  .blog-slider-nav {
    margin-top: 40px;
  }

  .related-prev,
  .related-next {
    width: 48px;
    height: 48px;
  }

  /* Service */
  .printing-section h3 {
    font-size: 28px;
  }

  .gallery-row img {
    height: 220px;
  }

  /* Vehicle / Service Details */
  .vehicle-wrap {
    padding: 60px 0 0;
  }

  .stickyHeading-placeholder {
    height: auto !important;
  }

  .section-heading h2 {
    font-size: 34px;
  }

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

  .image-card {
    max-width: 280px;
  }

  .contact-box {
    padding: 50px 30px 57px 30px;
    position: relative;
  }

  .contact-text {
    margin-bottom: 25px;
  }

  .form-wrapper {
    margin-top: 0;
  }

  .banner_pic {
    width: 100%;
    position: static;
  }

  .hero_home {
    & .wrap {
      & ul {
        flex-direction: row;
        gap: 14px;
      }
    }

    & .hero_btn {
      margin-top: 15px;
      margin-bottom: 15px;
    }

    & .hero-content {
      text-align: center;
    }
  }

  .about-section {
    & .content-wrapper {
      padding-left: 0px;
    }
  }

  .cpe-wrap {
    & .title {
      margin-bottom: 25px;

      br {
        display: none;
      }
    }
  }

  .hero_home {
    padding-bottom: 40px;
  }

  .hero_home h4 {
    font-size: 24px;
    line-height: 1.3;
    text-align: center;
  }

  .hero_home>.container>.row>.col-md-6>p {
    text-align: center;
  }

  .hero_home .wrap {
    display: block;
  }

  .hero_home .wrap ul {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 18px;
  }

  .circle-gallery {
    max-width: 380px;
    margin-top: 30px;
  }

  /* Event printing — standees + printer wrap into a centred group */
  .event-printing-section {
    padding: 40px 0 !important;
  }

  .event-printing-wrapper {
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
    min-height: auto;
  }

  .standee-big,
  .standee-small {
    min-height: auto;
    height: auto;
    margin: 0;
    transform: none;
  }

  .standee-big {
    width: 34%;
    max-width: 150px;
  }

  .standee-small {
    width: 26%;
    max-width: 115px;
  }

  .printer {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* The big offset box-shadows are anchored to desktop pixel offsets and
     bleed across the layout once the standees shrink. */
  .event-printing-section .event-printing-wrapper .event-item.standee-big::after,
  .event-printing-section .event-printing-wrapper .event-item.standee-small::after,
  .event-printing-section .event-item.printer::after {
    display: none;
  }

  .event_flower {
    display: none;
  }

  .quote-btn {
    position: static;
    width: 100%;
    text-align: center;
    margin-top: 25px;
  }

  /* Printing slider */
  .printing-slider-section {
    padding: 30px 0 40px;
  }

  .printingSlider {
    padding-bottom: 50px !important;
  }

  .printingSlider .swiper-wrapper {
    padding-top: 20px;
  }

  .printingSlider .swiper-slide.swiper-slide-active,
  .printingSlider .swiper-slide.last-visible {
    margin-top: 0;
  }

  .printing-card {
    padding-left: 12px;
  }

  /* Creative services — neutralise the desktop scale-up choreography */
  .creative-services {
    padding: 45px 0;
  }

  .creative-slider .swiper-wrapper {
    padding-top: 0;
  }

  .creative-slider.swiper .swiper-wrapper {
    min-height: auto;
  }

  .creative-slider .creative-active,
  /*
   * Swiper's own slide width is left alone here. Overriding it with auto made
   * the slide shrink to fit its content, and a service title long enough to
   * stay on one line then set the width, pushing the card wider than the
   * screen and clipping the text. Swiper sizes the slide to the viewport, so
   * the card fits and the title wraps.
   */
  .creative-slider .swiper-slide-active.swiper-slide {
    margin-top: 0;
  }

  .creative-slider .swiper-slide .service-card,
  .creative-slider .creative-active .service-card,
  .creative-slider .swiper-slide-active.swiper-slide .service-card,
  .creative-services .swiper-slide-active.swiper-slide .service-card {
    max-width: 100%;
    width: 100%;
  }

  .creative-slider .swiper-slide .service-card .image,
  .creative-slider .creative-active .image,
  .creative-slider .swiper-slide-active.swiper-slide .image {
    height: 220px !important;
    transform: none;
    border-width: 3px;
  }

  .creative-slider .creative-active h4,
  .service-card h4 {
    font-size: 16px;
    margin-top: 14px;
  }

  /* Gallery — 2 up */
  .gallery-section {
    padding: 30px 0 0;
  }

  .style-1.gallery-item,
  .style-2.gallery-item,
  .style-3.gallery-item,
  .style-4.gallery-item,
  .style-5.gallery-item,
  .style-6.gallery-item,
  .style-7.gallery-item {
    height: 200px;
    width: 50%;
    margin: 0 0 12px !important;
    padding: 0 6px;
  }

  /* Testimonial */
  .testimonial-section {
    padding: 40px 0 30px;
  }

  .testiSlider .swiper-wrapper {
    padding: 15px 0;
  }

  .testiSlider .testimonial-card {
    padding: 80px 18px 18px;
  }

  .testiSlider .testimonial-content {
    padding: 24px 20px 26px;
    gap: 12px;
  }

  .testiSlider .testimonial-content p {
    font-size: 15px;
  }

  .testiSlider .client-info img {
    width: 40px;
    height: 40px;
  }

  .testimonial-section .swiper-pagination {
    margin-top: 25px;
  }

  .testimonial-section .swiper-pagination-bullet,
  .printingSlider .swiper-pagination-bullet {
    width: 22px;

    &.swiper-pagination-bullet-active {
      width: 60px;
    }
  }

  /* Industry slider */
  .industry-card img {
    height: 190px;
  }

  .industry-slider-sec .swiper-wrapper .industry-card p {
    max-height: none;
    opacity: 1;
  }

  .industry-prev,
  .industry-next {
    width: 42px;
    height: 42px;
  }

  .industry-nav img {
    width: 17px;
  }

  /* CTA */
  .cta-section {
    padding: 40px 0 50px;
  }

  .cta-box {
    padding: 25px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .cta-buttons {
    gap: 14px;
  }

  .cta-buttons a {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (max-width: 667px) {
  .cta_span {
    &::after {
      width: 11px;
      height: 17px;
    }
  }

  header {
    .right_btn {
      max-width: fit-content;
      height: 35px;
    }
  }
}

@media (max-width: 576px) {
  .cpe-wrap {
    & .title {
      text-align: center;
    }
  }

  .cta_span {
    &::after {
      width: 10px;
      height: 14px;
    }
  }

  .why-us {
    & .left-panel {
      padding: 30px;
    }
  }

  .why-us {
    & .left-panel img {
      margin-top: 15px;
    }
  }

  .creative-slider .swiper-slide .service-card,
  .creative-slider .creative-active .service-card,
  .creative-services .swiper-slide-active.swiper-slide .service-card,
  .creative-slider .swiper-slide-active.swiper-slide .service-card {
    min-height: 390px;
  }

  .left-panel h2 {
    font-size: 30px;
  }

  .secGap {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .cpe-wrap {
    & .cpe-card {
      padding: 30px;
    }
  }

  .secGap2 {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .title {
    font-size: 28px;
    line-height: 1;
  }

  /* Further reduce inner-page heading & paragraph font sizes */
  .hero-content h1 {
    font-size: 30px;
  }

  .contact-title {
    font-size: 30px;
  }

  .vehicle-wrap .section-heading h2 {
    font-size: 30px;
  }

  .printing-section .title,
  .printing-section h3,
  .info-box h3,
  .impression-section .info-box h3,
  .contact-form h3 {
    font-size: 25px;
  }

  .why-us .feature h4,
  .team-content h4,
  .team-content p {
    font-size: 15px;
  }

  .hero-content p,
  .cpe-wrap .cpe-card-inner p,
  .about-section .content p,
  .team-section .section-desc,
  .printing-section p,
  .contact-text,
  .vehicle-wrap .content p,
  .stickyHeading p,
  .gallery-heading p {
    font-size: 14px;
  }

  .section-title {
    font-size: 34px;
  }

  .info-box h3 {
    font-size: 28px;
  }

  .fire-shape {
    width: 90px;
    top: -10px;
  }

  .btn {
    width: 100%;
  }

  .creative-services {
    padding: 60px 0;
  }

  .service-card .image {
    height: 190px;
  }

  .swiper-slide {
    width: 150px;
  }

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

  .creative-slider .creative-active h4 {
    font-size: 20px;
  }

  .printing-image {
    height: 200px;
  }

  .printing-card h5 {
    font-size: 14px;
  }

  .circle-wrapper {
    transform: scale(0.6);
  }
}

@media (max-width: 575.98px) {
  .site-footer {
    padding-top: 35px;
  }

  .team-section {
    & .team-image img {
      width: 100%;
      max-width: 352px;
      height: 200px;
    }
  }

  .stellarnav {
    width: auto;
    position: absolute !important;
    right: 68px;
    top: 3px;
  }

  .hero-content p {
    line-height: 1.4;
  }

  header {
    & .right_btn {
      a {
        font-size: 14px;
        gap: 2px;
      }
    }
  }

  header {
    &.sticky {
      .right_btn {
        max-width: fit-content;
        height: 35px;
      }
    }
  }

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

  .footer-bottom {
    margin-top: 24px;
  }

  header {
    & .logo {
      width: 90px;
    }
  }

  .gallery-zigzag-grid {
    grid-template-columns: 1fr;
  }

  .pipe-wrap {
    margin: 10px 0;
  }

  .pipe-img {
    height: 60px;
  }
}

@media (max-width: 575px) {
  .blog-image img {
    height: 210px;
  }

  .hero_home {
    & .wrap {
      & ul {
        flex-wrap: wrap;
      }
    }
  }

  .cta-box {
    padding: 30px;
  }

  .hero_home .hero-content,
  .hero_home .hero-content h1 {
    text-align: center;
  }

  .banner_pic {
    & .squareImg {
      max-width: 55%;
      height: 160px;
    }
  }

  .gallery-section {
    padding: 30px 0 0;
    position: relative;
  }

  .related-blog-section .swiper-button-next,
  .related-blog-section .swiper-button-prev {
    position: relative;
    width: 42.42px;
    height: 42.42px;
  }

  .serviceGallery .gallery-column.offset-down .style-1.gallery-item,
  .serviceGallery .gallery-column.offset-down .style-4.gallery-item,
  .serviceGallery .gallery-column.offset-down .style-5.gallery-item {
    height: 150px;
  }

  .blog-content h3 {
    font-size: 18px;
  }

  .blog-content p {
    font-size: 15px;
  }

  .standee-big {
    width: 110px;
  }

  .standee-small {
    width: 75px;
  }

  .event-desc {
    font-size: 14px;
  }

  .shape-bg {
    display: none;
  }

  .printing-section {
    & .gallery-row img {
      width: 100%;
      height: auto;
    }
  }

  & .swiper-button-next,
  & .swiper-button-prev {
    width: 35.42px;
    height: 35.42px;
  }

  .hero_home {
    padding-top: 20px !important;
  }

  .hero_home h4 {
    font-size: 21px;
  }

  .hero_home .hero_btn {
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 25px;
  }

  .hero_home .hero_btn a {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }

  .circle-wrapper {
    transform: none;
  }

  .circle-gallery {
    max-width: 300px;
  }

  /* About */
  .about-section.hero_about.secGap {
    padding: 35px 0;
  }

  .about-section.hero_about .image-frame {
    padding: 12px;
    max-width: 280px;
  }

  .about-section.hero_about .image-frame img {
    height: 300px;
    border-width: 6px;
  }

  .about-section.hero_about .bg-box {
    height: 300px;
    bottom: -20px;
  }

  /* Event */
  .standee-big {
    max-width: 110px;
  }

  .standee-small {
    max-width: 85px;
  }

  /* Gallery — single column */
  .style-1.gallery-item,
  .style-2.gallery-item,
  .style-3.gallery-item,
  .style-4.gallery-item,
  .style-5.gallery-item,
  .style-6.gallery-item,
  .style-7.gallery-item {
    height: 230px;
    width: 100%;
    padding: 0;
    margin: 0 0 12px !important;
  }

  #gallery {
    padding: 35px 0;
  }

  #gallery .title {
    margin-bottom: 25px;
  }

  /* Testimonial */
  .testiSlider .testimonial-card {
    padding: 70px 14px 14px;
  }

  .testiSlider .quote-bg img {
    height: 44px;
  }

  .testiSlider .rating img {
    width: 15px;
    height: 15px;
  }

  .testiSlider .testimonial-content {
    padding: 20px 16px 22px;
  }

  .testiSlider .client-info h5 {
    font-size: 17px;
  }

  /* CTA */
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-buttons a {
    width: 60%;
  }

  .event-printing-section .event-item.printer {
    margin-top: 20px;
    width: 68%;
  }

  .printing-slider-section .swiper.printingSlider.mt-5.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
    margin-top: 20px;
  }

  .about-section.secGap.hero_about .content-wrapper .content p {
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .hero_home .hero-content h1 {
    font-size: clamp(26px, 8vw, 34px);
  }

  .creative-slider .swiper-slide .service-card,
  .creative-slider .creative-active .service-card,
  .creative-services .swiper-slide-active.swiper-slide .service-card,
  .creative-slider .swiper-slide-active.swiper-slide .service-card {
    min-height: 292px;
  }

  .about-section.hero_about {
    .hero-divider {
      opacity: 0;
    }
  }

  .hero-section.hero_home .circle-gallery {
    width: 100%;
  }

  .creative-slider .slider-navigation {
    margin-top: 28px;
  }

  .hero_home h4 {
    font-size: 19px;
  }

  .hero_home .hero_btn {
    flex-direction: column;
    align-items: center;
  }

  .hero_home .hero_btn a {
    height: 40px;
    font-size: 12px;
    width: 50%;
  }

  .hero_home .wrap ul {
    flex-direction: column;
    gap: 10px;
  }

  .circle-gallery {
    max-width: 70%;
  }

  .event-printing-wrapper {
    gap: 12px;
  }

  .standee-big {
    max-width: 92px;
  }

  .standee-small {
    max-width: 70px;
  }

  .printing-image {
    height: 170px;
  }

  .service-card .image,
  .creative-slider .swiper-slide .service-card .image,
  .creative-slider .creative-active .image,
  .creative-slider .swiper-slide-active.swiper-slide .image {
    height: 190px !important;
  }

  .industry-card {
    padding: 0 8px;
  }

  .industry-card img {
    height: 160px;
  }

  .style-1.gallery-item,
  .style-2.gallery-item,
  .style-3.gallery-item,
  .style-4.gallery-item,
  .style-5.gallery-item,
  .style-6.gallery-item,
  .style-7.gallery-item {
    height: 190px;
  }

  .cta-box p {
    font-size: 14px;
    line-height: 1.7;
  }
}

@media (max-width: 412px) {

  .footer-links-col,
  .footer-services-col {
    width: 100%;
    margin-bottom: 30px;
    text-align: center;
  }

  .footer-form {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  .banner_pic {
    & .squareImg {
      max-width: 55%;
      height: 120px;
    }
  }

  .footer-contact p,
  .footer-contact-list li,
  .footer-title {
    text-align: center;
  }

  .printing-section .title,
  .printing-section h3,
  .info-box h3,
  .impression-section .info-box h3,
  .contact-form h3 {
    font-size: 20px;
  }

  & .title {
    margin-bottom: 10px;
  }

  .serviceGallery .style-1.gallery-item,
  .serviceGallery .style-2.gallery-item,
  .serviceGallery .gallery-column.offset-down .style-1.gallery-item,
  .serviceGallery .gallery-column.offset-down .style-4.gallery-item,
  .serviceGallery .gallery-column.offset-down .style-5.gallery-item,
  .serviceGallery .gallery-column.offset-up .style-1.gallery-item,
  .serviceGallery .gallery-column.offset-up .style-2.gallery-item {
    height: 229px;
    width: 100%;
    padding: 0 1% 2%;
  }

  .hero_home .hero-content h1 {
    font-size: clamp(28px, 4vw, 72px);
    line-height: 1.1;
  }

  .header.sticky .stellarnav {
    right: 63px;
    top: 2px;
  }
}

@media (max-width: 380px) {
  .hero_home .hero-content h1 {
    font-size: 26px;
  }

  .circle-gallery {
    max-width: 225px;
  }

  .standee-big {
    max-width: 78px;
  }

  &.swiper-pagination-bullet-active {
    width: 29px;
  }

  .testimonial-section .swiper-pagination-bullet,
  .printingSlider .swiper-pagination-bullet {
    width: 11px;
  }

  .standee-small {
    max-width: 60px;
  }

  .testiSlider .testimonial-card {
    padding: 62px 12px 12px;
  }

  .testiSlider .quote-bg img {
    height: 38px;
  }

  .testiSlider .testimonial-content p {
    font-size: 14px;
  }

  .style-1.gallery-item,
  .style-2.gallery-item,
  .style-3.gallery-item,
  .style-4.gallery-item,
  .style-5.gallery-item,
  .style-6.gallery-item,
  .style-7.gallery-item {
    height: auto;
  }

  .industry-prev,
  .industry-next {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 340px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero_home .hero-content h1 {
    font-size: 23px;
  }

  .hero_home h4 {
    font-size: 17px;
  }

  .title {
    font-size: 24px;
  }

  .circle-gallery {
    max-width: 200px;
  }

  .event-printing-wrapper {
    gap: 8px;
  }

  .standee-big {
    max-width: 66px;
  }

  .standee-small {
    max-width: 52px;
  }

  .btn-transparent,
  .theme-btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  .testiSlider .testimonial-content {
    padding: 16px 12px 18px;
  }

  .style-1.gallery-item,
  .style-2.gallery-item,
  .style-3.gallery-item,
  .style-4.gallery-item,
  .style-5.gallery-item,
  .style-6.gallery-item,
  .style-7.gallery-item {
    height: 145px;
  }

  .industry-card img {
    height: 140px;
  }
}

/*
 * Home page section headings.
 *
 * Sized so a 1366px screen lands on 49px, scaling down to 43px at 1200px and
 * holding at 49px up to 1440px. The banner headline is deliberately left out,
 * and the range stops at 1200px so the larger tablet sizing above still runs.
 */
@media (min-width: 1200px) and (max-width: 1440px) {

  .home .about-section.hero_about .title,
  .home .event-printing-section .title,
  .home .printing-slider-section .title,
  .home .creative-services .title,
  .home .gallery-section .title,
  .home .testimonial-section .title,
  .home .industry-slider-sec .title,
  .home .cta-section .title {
    font-size: clamp(28px, 3.59vw, 49px);
    line-height: 1.15;
  }
}

/*
 * Home page section rhythm.
 *
 * Each section carried 60-96px of padding top and bottom, so neighbouring
 * sections stacked into gaps of 130-190px. These trim roughly a third off,
 * keeping the sections distinct without the dead space between them. Scoped to
 * the home page and to desktop widths; the stacked mobile spacing is unchanged.
 */
@media (min-width: 992px) {

  .home .about-section.hero_about.secGap {
    padding: 50px 0 45px;
  }

  .home .event-printing-section {
    /* Overrides Bootstrap's .py-5 utility, which is itself !important. */
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .home .printing-slider-section {
    padding-bottom: 60px;
  }

  .home #gallery {
    padding: 60px 0;
  }

  .home .testimonial-section {
    padding-top: 60px;
    padding-bottom: 50px;
  }

  .home .industry-slider-sec {
    padding: 55px 0 45px;
  }

  .home .cta-section {
    padding: 50px 0 60px;
  }
}

/*
 * Footer fire graphic on small screens.
 *
 * At its full size the graphic is pushed 57px past the right edge of the dark
 * box, which the footer's overflow: hidden then cuts flush against the screen
 * edge. Scaled down and pulled inside so it reads as artwork again.
 */
@media (max-width: 767px) {
  .site-footer .darkbox::after {
    right: -12px;
    top: -26px;
    width: 120px;
    height: 147px;
    background-size: contain;
  }
}

/*
 * Footer newsletter form on tablet and mobile.
 *
 * From 1440px down the form is a flex row, which put the input, the error
 * message and the submit button all on one line. The messages now break onto
 * their own full width row, leaving the field and button side by side.
 */
@media (max-width: 1440px) {
  .footer-form {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .footer-form .form-error,
  .footer-form .form-status {
    flex: 0 0 100%;
    margin-top: -8px;
  }
}

/* Tighten the gap under the "Email Us" heading on small screens. */
@media (max-width: 991px) {
  .footer-title--newsletter {
    margin-top: 8px;
    margin-bottom: 0;
  }

  .footer-form {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

/*
 * Newsletter submit button hover, tablet and mobile.
 *
 * The desktop hover swaps the fill for an outline: transparent background,
 * orange text, orange border. But from 1440px down the border is removed, so
 * that hover left nothing but floating orange text and the button read as
 * having lost its background. Below 1440px it darkens instead of hollowing out.
 */
@media (max-width: 1440px) {

  .footer-form button:hover,
  .footer-form button:focus-visible {
    background: #c25f14;
    color: #fff;
    border: none;
  }
}

/*
 * On a touch screen there is no pointer to move away, so the hover state
 * sticks after the tap and the button stays in it. Nothing should change on
 * hover there.
 */
@media (hover: none) {
  .footer-form button:hover {
    background: var(--secondary-color2);
    color: #fff;
  }
}

/*
 * Contact popup on small screens.
 */
@media (max-width: 767px) {

  /*
   * The submit button carried a 45px top margin on top of the 25px each field
   * already leaves below it, which read as a gap rather than a separation.
   */
  #contactModal .modal-content form .theme-btn {
    margin-top: 8px;
  }

  #contactModal .modal-content form .input-wrap {
    margin-bottom: 18px;
  }

  /* Small enough that the messages hold to a single line. */
  .form-error,
  .form-status {
    font-size: 12.5px;
    margin-top: 4px;
  }
}

/*
 * Contact details box on small screens.
 *
 * At 320px the box keeps 60px of side padding and a 58px icon, leaving about
 * 160px for the text. The email address needs more than that, so it ran
 * straight out of the box. The padding and icon come in, the type comes down,
 * and a long unbroken value now wraps rather than overflowing.
 */
.contact-item h6 {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .contact-box {
    padding: 34px 20px 38px;
  }

  .contact-item {
    margin-bottom: 26px;
  }

  .contact-item .icon {
    width: 46px;
    height: 46px;
    margin-right: 12px;
  }

  .contact-item .icon img {
    height: 20px;
  }

  .contact-box .contact-item:first-child .icon img {
    height: 24px;
  }

  .contact-item span {
    font-size: 15px;
    margin-bottom: 2px;
  }

  .contact-item h6 {
    font-size: 14px;
    line-height: 1.45;
  }
}

/*
 * Home gallery on phones.
 *
 * The zigzag tiles are fixed height boxes and the images fill them with
 * aspect-ratio: 1/1 and object-fit: cover. That works while the tiles are
 * roughly square on desktop, but in the single column phone layout a tile is
 * full width and only 145-230px tall, so cover was cropping most of every
 * picture away. Below 576px the tiles take the height of their image and the
 * image keeps its own proportions, so nothing is cut off.
 */
@media (max-width: 575.98px) {
  .home #gallery .gallery-item[class*="style-"] {
    height: auto;
  }

  .home #gallery .gallery-item img {
    aspect-ratio: auto;
    height: auto;
  }
}

/*
 * About page: the two photos beside the intro card.
 *
 * Below 992px the columns reorder so both photos sit side by side, but the
 * wrappers were left at height: 100%, which resolves to auto against a column
 * with no height of its own. Each photo then took the height of its own image,
 * and the two source images have different proportions.
 *
 * Both wrappers get the same height, and the image is fitted inside it rather
 * than filling it: the two photos are different shapes, so cropping is the
 * only other way to make them match, and that loses part of the picture.
 */
@media (max-width: 991px) {

  .cpe-wrap .cpe-photo-left,
  .cpe-wrap .cpe-photo-right {
    width: 100%;
    max-width: 100%;
    height: 260px;
    margin-top: 0;
    float: none;
  }

  .cpe-wrap .cpe-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

/*
 * About page: section rhythm on tablet and below.
 *
 * 50px of padding at each end of every section stacked into 100px gaps.
 */
@media (max-width: 991px) {
  .page-template-template-about .secGap {
    padding-top: 35px;
    padding-bottom: 35px;
  }

  .page-template-template-about .team-slider-wrapper {
    margin-top: 30px;
  }

  .page-template-template-about .mt-100 {
    margin-top: 24px;
  }

  .vehicle-wrap {
    .image-bg {
      background: #f7efe300;
    }
  }
}

/*
 * Decorative background artwork on small screens.
 *
 * The flower and ribbon graphics are applied as inline background shorthands
 * from ACF, at their full size. On a phone that fills most of the section and
 * sits behind the copy. Scaling them down keeps them as corner decoration.
 *
 * !important is unavoidable here: the inline background shorthand resets
 * background-size to auto, and an inline declaration outranks this file.
 */
@media (max-width: 767px) {
  .hero-section {
    background-size: 150px auto !important;
    background-position: right bottom !important;
  }
}

@media (max-width: 991px) {
  .why-us {
    background-size: 150px auto !important;
    background-position: right bottom !important;
  }

  .footer-form input,
  .footer-form button {
    width: 47%;
    height: 46px;
    border: 0;
    border-radius: 0;
    font-size: 16px;
  }
}

/*
 * Service detail page on phones.
 */
@media (max-width: 767px) {

  /*
   * The related services slider keeps the desktop 140px bottom padding, plus
   * a 50px top margin and the swiper's own 50px, because the .service prefixed
   * rule outranks the plain .printing-slider-section one that gets reduced
   * here. Set on the same selector so it actually applies.
   */
  .single-service .service.printing-slider-section {
    margin-top: 20px;
    padding: 0 0 30px;
  }

  .single-service .printingSlider {
    padding-bottom: 24px !important;
  }

  .theme-btn {
    font-size: 12px !important;
    padding: 9px 20px !important;
  }

  .btn-transparent,
  .theme-btn {
    padding: 9px 20px;
    font-size: 12px;
  }

  .creative-slider .slider-navigation {
    img {
      width: 17px;
    }
  }

  .service-prev,
  .service-next {
    width: 52.42px;
    height: 40.42px !important;
    flex: 0 0 40.42px;
  }

  /*
   * The zigzag offsets are what stagger the columns on desktop. Once the
   * columns wrap into rows they only produce uneven gaps, so they are cleared
   * and one gap value governs the whole grid.
   */
  /*
   * The wider gap here separates one column group from the next; the 12px
   * below keeps the images inside a group tight together.
   */
  .serviceGallery .gallery-zigzag-grid {
    gap: 28px;
  }

  .serviceGallery .gallery-column {
    gap: 12px;
    margin-top: 0;
    left: 0;
  }

  .serviceGallery .gallery-column.offset-down,
  .serviceGallery .gallery-column.offset-up {
    margin-top: 0;
    left: 0;
  }

  .serviceGallery .gallery-item[class*="style-"] {
    margin: 0 !important;
  }

  .footer-form input,
  .footer-form button {
    width: 47%;
    height: 40px;
    border: 0;
    border-radius: 0;
    font-size: 13px;
  }

  .team-section {
    & .slider-nav {
      img {
        width: 17px;
      }
    }
  }

  .team-section {

    & .swiper-button-next,
    & .swiper-button-prev {
      width: 39.42px;
      height: 41.42px !important;
      flex: 0 0 41.42px;
    }
  }

  .why-us {
    & .icon-circle {
      img {
        width: 44px;
        height: auto;
        object-fit: contain;
      }
    }
  }

  .printing-slider-section.service .printingSlider {
    & .slider-nav {
      img {
        width: 17px;
      }
    }

  }

  .footer-logo img {

    width: 85%;
  }

  .printing-slider-section.service .printingSlider {

    .swiper-button-next,
    .swiper-button-prev {
      width: 42.42px;
      height: 42.42px;
    }
  }

  .tp-stat-label {
    font-size: 13px;
  }

  .tp-stat-value {
    font-size: 35px;
  }
}

@media (max-width: 390px) {

  .footer-form input,
  .footer-form button {
    width: 100%;
  }
}
@media (max-width: 320px) {
    .creative-slider .swiper-slide .service-card, .creative-slider .creative-active .service-card, .creative-services .swiper-slide-active.swiper-slide .service-card, .creative-slider .swiper-slide-active.swiper-slide .service-card {
        min-height: 290px;
    }
}