.bg-img-none {
  background-image: none;
}

.thank-you-top-margin {
  margin-top: 200px;
}

.hero-product {
  height: auto;
  padding: 200px 20px;
}

@media only screen and (max-width: 767px) {
  .hero-product {
    padding: 120px 20px 250px;
  }

  .wave-path-prismane {
    top: 500px !important;
  }
}

@media only screen and (max-width: 480px) {
  .hero-product {
    padding: 120px 20px 270px;
  }

  .wave-path-prismane {
    top: 480px !important;
  }

  .dtf-printers-mob-shape {
    top: 520px !important;
  }

  .tpu-powder-mob-shape {
    top: 850px !important
  }

  .pigments-and-dyes-mob-shape {
    top: 720px !important;
  }
}

@media only screen and (max-width: 390px) {
  .hero-product {
    padding: 100px 20px 290px;
  }

  .wave-path-prismane {
    top: 560px !important;
  }
}

.bg-prismane {
  background: #c9f31d;
}

.rounded-none {
  border-radius: 0 !important;
}

* {
  outline: none;
}

/* Hide all tab panes by default */
.mega-menu-2 .tab-pane {
  display: none !important;
}

/* Show only active tab */
.mega-menu-2 .tab-pane.active.show {
  display: flex !important; /* since you're using flex utilities */
}

/* Applications Mega Menu – Vertical Pills Styling */
.header__area-2 .nav-pills .nav-link {
  background-color: #000; /* Normal state */
  color: #fff;
  border-radius: 0;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

/* Hover state */
.header__area-2 .nav-pills .nav-link:hover {
  background-color: #c9f31d;
  color: #000;
}

/* Active state */
.header__area-2 .nav-pills .nav-link.active,
.header__area-2 .nav-pills .show > .nav-link {
  background-color: #c9f31d;
  color: #000;
}

.z-1 {
  z-index: 1;
}

th {
  padding: 12px 24px !important;
}

td {
  padding: 16px 24px !important;
}

.text-table-head {
  color: #82878c;
}

@keyframes colorChange {
  0% {
    fill: rgb(255, 0, 0); /* Red */
  }
  33% {
    fill: rgb(0, 255, 0); /* Green */
  }
  66% {
    fill: rgb(0, 0, 255); /* Blue */
  }
  100% {
    fill: rgb(255, 0, 0); /* Red */
  }
}

/* Apply animation to wave paths */
.waves path {
  animation: colorChange 3s ease-in-out infinite;
}

tr td {
  align-content: center;
}

.color-item {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 0;
}
.table {
  width: 1296px;
}

/* Portfolio title in product page */
.portfolio-title-new {
  font-size: 85px;
}

.portfolio-title-new-2 {
  font-size: 85px;
  margin-top: 100px !important;
}

.header-z-index {
  z-index: 100;
}

.header__logo-2 img {
  transition: opacity 0.3s ease; /* Smooth transition */
}

.logo-secondary {
  display: none; /* Hide the secondary logo by default */
}

@media (max-width: 1199px) {
  .header__area-2 .logo-primary {
    display: block;
  }
}
.mandarin-title-1 {
  font-size: 36px;
}
.mandarin-title-2 {
  font-size: 28px !important;
}

.text-prismane {
  color: #c9f31d !important;
}

.text-prismane-2 {
  color: #bae800 !important;
}
.about_btn::before {
  background-color: #bce31c;
}

.masked-video,
.masked-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 180px;
  margin: 0;
}

.masked-video {
  object-fit: cover;
  top: 1px;
}

.masked-title {
  font-size: 100px;
  /* font-family: Biko, sans-serif; */
  font-weight: 500;
  line-height: 70px;
  text-transform: uppercase;
  text-align: left;
  background: white;
  mix-blend-mode: screen;
  height: 200px;
}

.masked-title-holder {
  margin-bottom: 170px;
}

.masked-title-mandarin {
  font-size: 50px;
}

@media (max-width: 410px) {
  .wave-path-prismane {
    top: 470px !important;
  }

  .dtf-printers-mob-shape {
    top: 550px !important;
  }

  .tpu-powder-mob-shape {
    top: 950px !important
  }

  .pigments-and-dyes-mob-shape {
    top: 770px !important;
  }

  .pigments-dispersions-mob-shape {
    top: 505px !important;
  }

  .sublimation-dispersions-mob-shape {
    top: 505px !important;
  }

}

@media (max-width: 425px) {
  .table {
    width: max-content !important;
  }

  .table th {
    padding: 10px 12px !important;
    font-size: 11px;
    white-space: nowrap;
  }

  .table td {
    padding: 10px 12px !important;
    font-size: 12px;
    white-space: nowrap;
  }

}


.footer-custom-class {
  max-width: 500px !important;
}

/* ── Who We Are page component fixes ── */

/* Dripping ink image — cap height across all viewports */
.hero__about-award img {
  max-height: 200px;
  width: auto;
  object-fit: contain;
}

/* Testimonial — remove quote background icon */
.testimonial__inner-2 {
  background-image: none !important;
}

/* ── Who We Are page responsive fixes ── */

/* 20px side padding on all section containers at mobile */
@media only screen and (max-width: 767px) {
  .hero__about .container,
  .story__area .container,
  .testimonial__area-2 .container,
  .cta__area .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Hero content top padding — reduce for small phones */
@media only screen and (max-width: 480px) {
  .hero__about-content {
    padding-top: 100px !important;
  }

  /* Reduce letter spacing on the hero title for small phones */
  .hero__about-content .hero-title,
  .hero__about-content .hero-title .word,
  .hero__about-content .hero-title .char {
    letter-spacing: -0.02em !important;
    word-spacing: -0.05em !important;
  }
}

/* Hero info grid: stack to single column on mobile */
@media only screen and (max-width: 767px) {
  .hero__about-info {
    grid-template-columns: 1fr;
  }

  .hero__about-award {
    position: static;
    justify-content: flex-start;
  }

  .hero__about-award::before {
    display: none;
  }

  .hero__about-text p {
    font-size: 16px;
  }
}

/* Tablet: hero info 2-column layout */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__about-info {
    grid-template-columns: 1fr 2fr;
  }

  .hero__about-award {
    grid-column: 1/-1;
  }
}

/* Story: text column spacing on mobile */
@media only screen and (max-width: 767px) {
  .story__text {
    padding-top: 20px;
  }

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

  .story__img-wrapper {
    height: auto;
    margin-bottom: 10px;
  }
}

/* Story: tablet — shrink image block heights */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .story__img-wrapper {
    height: auto;
  }
}

/* Testimonial: padding adjustments on mobile */
@media only screen and (max-width: 767px) {
  .testimonial__inner-2 {
    padding: 50px 0 30px;
    background-position: 0 0;
  }

  .testimonial__title-2 {
    font-size: 28px;
    padding: 15px 0;
  }

  .testimonial__text-2 {
    font-size: 16px;
    padding-right: 0;
    padding-bottom: 20px;
  }
}

/* CTA: font size on mobile */
@media only screen and (max-width: 767px) {
  .cta__title {
    font-size: 28px;
  }
}

/* ── Footer fixes ── */

/* Copyright text — left-aligned at all viewports */
.footer__copyright,
.footer__copyright p {
  text-align: left !important;
}

/* Contact address — prevent overflow on small screens */
.footer__contact li {
  word-break: break-word;
  overflow-wrap: break-word;
}

@media only screen and (max-width: 767px) {
  .footer__widget-3 {
    padding-right: 20px;
  }
}

/* 20px side padding on the outer footer container on mobile */
@media only screen and (max-width: 767px) {
  .footer__btm .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Sublimation Inks page — 20px side padding at mobile ── */
@media only screen and (max-width: 767px) {
  .hero__area .container,
  .development__area .container,
  .about__area-3 .container,
  .sublimation-series-overview .container,
  .service__area-7 .container,
  .portfolio__service .container,
  .faq__area-6 .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── New Launch page — 20px side padding at mobile ── */
@media only screen and (max-width: 767px) {
  .launch__hero .container,
  .launch__colors .container,
  .launch__features .container,
  .launch__showcase .container,
  .launch__cta .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Connect page responsive fixes ── */

/* 20px side padding on the contact section container at mobile */
@media only screen and (max-width: 767px) {
  .contact__area-6 .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Tablet (768px – 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__text {
    max-width: 100%;
    margin-left: 0;
    padding-top: 20px;
  }

  .contact__info h3 {
    font-size: 22px;
  }

  .contact__info ul li a,
  .contact__info ul li span {
    font-size: 16px;
  }

  .contact__btm {
    padding-top: 40px;
  }
}

/* Mobile (≤ 767px) */
@media only screen and (max-width: 767px) {
  .contact__text {
    max-width: 100%;
    margin-left: 0;
    padding-top: 20px;
    display: block;
  }

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

  .contact__info h3 {
    font-size: 20px;
    padding-bottom: 20px;
  }

  .contact__info ul li a,
  .contact__info ul li span {
    font-size: 16px;
  }

  .contact__info ul li {
    gap: 8px;
  }

  .contact__btm {
    padding-top: 35px;
  }

  .contact__info {
    padding-bottom: 35px;
  }

  .contact__form .btn_wrapper,
  .contact__form #btn_wrapper {
    margin-top: 5px;
  }
}

/* Small phones (≤ 480px) */
@media only screen and (max-width: 480px) {
  .contact__info h3 {
    font-size: 18px;
  }

  .contact__form input,
  .contact__form textarea {
    font-size: 14px;
    margin-bottom: 15px;
  }
}

/* ── Homepage About section — mobile fix ── */
@media only screen and (max-width: 767px) {
  /* Stack image and text cleanly — prevent second image overlapping text */
  .about__content-wrapper {
    display: flex !important;
    flex-direction: column;
  }

  /* Hide the second floating image on mobile — it causes overlap */
  .about__img-right {
    display: none !important;
  }

  /* Let the first image fill the column properly */
  .about__img {
    width: 100%;
    overflow: hidden;
  }

  .about__img .img-anim img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Push text content clearly below the image */
  .about__content {
    padding-top: 30px !important;
    width: 100%;
  }

  /* Reduce paragraph font size and margin for small screens */
  .about__content p {
    font-size: 15px !important;
    margin-bottom: 20px !important;
    max-width: 100% !important;
  }
}