* {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.body {
  padding: 0;
  margin: 0;
  width: 100%;
}

.menu-item {
  border-bottom: 0;
}

.menu-item:hover {
  border-bottom: 3px solid #f5b105;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 350;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.righteous-regular {
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.about-2 {
  line-height: 1.3em;
}

/* ===== Scroll Reveal Animations ===== */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-zoom {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-zoom.visible {
  opacity: 1;
  transform: scale(1);
}

.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.2s;
}

.delay-3 {
  transition-delay: 0.3s;
}

.delay-4 {
  transition-delay: 0.4s;
}

.delay-5 {
  transition-delay: 0.5s;
}

/* about images */
.about-img1,
.about-img2,
.about-img3,
.about-img4 {
  transition: box-shadow 0.4s ease;
}

.about-img1:hover,
.about-img2:hover,
.about-img3:hover,
.about-img4:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* footer */

.footer {
  box-shadow: 0 1px 50px 5px rgb(0 0 0 / 0.2);
}

.f-1 {
  padding-top: 80px;
  padding-bottom: 50px;
}

.f-2 {
  background-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.71)
}

/* ============================================================
   FOOTER TYPOGRAPHY — consistent scale across heading / links /
   contact text / email / icons. Previously each piece used a
   different ad-hoc size (text-lg/xl headings, text-sm/base links,
   inherited text-sm/base address+phone, and a separately-patched
   smaller email), which left the footer looking uneven once the
   email was sized down to fit on one line. This block scales the
   whole footer as one set, with matching breakpoints.
   ============================================================ */

/* Column headings: "Facility Services", "Material Supply", "Contact" */
.footer-heading {
  font-size: 1.05rem;
}

@media (max-width: 1023px) {
  .footer-heading {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .footer-heading {
    font-size: 0.95rem;
  }
}

/* Facility Services / Material Supply link lists */
.footer-link-list {
  font-size: 0.82rem;
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .footer-link-list {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .footer-link-list {
    font-size: 0.76rem;
  }
}

/* Contact column: address + phone (email is sized separately
   below since it also needs white-space:nowrap) */
.footer-contact-text {
  font-size: 0.82rem;
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .footer-contact-text {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .footer-contact-text {
    font-size: 0.76rem;
  }
}

/* Footer email — same scale as the rest of the contact text, but
   kept on a single line via white-space:nowrap so "lingam@eagle
   groupsindia.com" never wraps awkwardly in the Contact column. */
.footer-email {
  font-size: 0.82rem;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .footer-email {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .footer-email {
    font-size: 0.7rem;
  }
}


/* header dropdown popup */

.nav1,
.nav2 {
  position: relative;
  display: inline-block;
}

/* Popup */
.dropdown1,
.dropdown2 {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  height: auto;
  border-radius: 10px;
  width: 175px;
  height: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: none;
  margin-top: 5px;
}

.dropdown1 p,
.dropdown2 p {
  margin: 0;
  padding: 10px;
  /* cursor: pointer; */
}

.dropdown1 p:hover,
.dropdown2 p:hover {
  background-color: #f5b105;
  color: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* two text fade down */

.container {
  position: relative;
  height: 40px;
  overflow: hidden;
}

.text {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  opacity: 0;
  transform: translateY(-30px);
  transition: all 0.6s ease;
  white-space: nowrap;
}

.text.show {
  opacity: 1;
  transform: translateY(0);
}

/* brands carousel */

.brands-heading {
  font-family: "Plus Jakarta Sans", "Poppins", sans-serif;
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, #1a3a5c, #2e6ea6 55%, #19c6b7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.carousel {
  width: 90%;
  margin: 16px auto;
  overflow: hidden;
  background: transparent;
  padding: 14px 0;
  border-radius: 10px;
}

.track {
  display: flex;
  transition: transform 0.6s ease;
}

.item {
  flex: 0 0 20%;
  /* 5 items visible */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 14px;
}

.item>img {
  width: 100px;
  height: 60px;
  object-fit: contain;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  box-shadow: 4px 6px 16px -1px rgba(0, 0, 0, 0.12), 2px 4px 8px -1px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
  padding: 16px;
  box-sizing: content-box;
  mix-blend-mode: multiply;
}

.item>img:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
}

/* ── Clients / Brands slider section ── */
section.clients {
  padding-block: 6px;
}

.services-title2 {
  line-height: 1.3em;
}

.service-title,
.about-title {
  letter-spacing: 1px;
}

/* Why Choose Us cards hover */
.card {
  transition: opacity 0.7s ease, transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
}

/* testimonials */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes underlineGrow {
  from {
    width: 0;
  }

  to {
    width: 5rem;
  }
}

@keyframes starPop {
  0% {
    transform: scale(0) rotate(-20deg);
    opacity: 0;
  }

  70% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes avatarReveal {
  from {
    transform: scale(0.5) rotate(-10deg);
    opacity: 0;
  }

  to {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

/* animated underline under section title */
.tl-underline {
  width: 0;
  transition: width 1s ease;
}

.tl-underline.grow {
  width: 5rem;
}

.animate-fade {
  animation: fadeIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.testimonial-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: default;
}

.testimonial-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 24px 40px -8px rgba(0, 0, 0, 0.13), 0 8px 16px -4px rgba(0, 0, 0, 0.07);
}

/* star pop-in when card animates */
.animate-fade .fas.fa-star,
.animate-fade .far.fa-star,
.animate-fade .fas.fa-star-half-alt {
  display: inline-block;
  animation: starPop 0.4s ease both;
}

.animate-fade .fas.fa-star:nth-child(1),
.animate-fade .far.fa-star:nth-child(1) {
  animation-delay: 0.05s;
}

.animate-fade .fas.fa-star:nth-child(2),
.animate-fade .far.fa-star:nth-child(2) {
  animation-delay: 0.10s;
}

.animate-fade .fas.fa-star:nth-child(3),
.animate-fade .far.fa-star:nth-child(3) {
  animation-delay: 0.15s;
}

.animate-fade .fas.fa-star:nth-child(4),
.animate-fade .far.fa-star:nth-child(4) {
  animation-delay: 0.20s;
}

.animate-fade .fas.fa-star:nth-child(5),
.animate-fade .far.fa-star:nth-child(5),
.animate-fade .fas.fa-star-half-alt:nth-child(5) {
  animation-delay: 0.25s;
}

/* avatar reveal */
.animate-fade img.rounded-full {
  animation: avatarReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

/* quote mark accent */
.testimonial-card .bg-white {
  position: relative;
  overflow: hidden;
}

.testimonial-card .bg-white::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: 12px;
  font-size: 5rem;
  color: rgba(79, 70, 229, 0.07);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}

.active-dot {
  transform: scale(1.4);
  background-color: #4F46E5;
}

.nav-button {
  transition: all 0.3s ease;
}

.nav-button:hover {
  background-color: #4F46E5;
  color: white;
}

/* image popup implementation */

/* Overlay */
.popup1,
.popup2 {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: block;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translateY(20%);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

/* Active state */
.active {
  transform: translateY(0);
  transition: 0.5s ease;
  opacity: 1;
  position: absolute;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

/* contact banner */

/* ── Background image via CSS so we can layer the overlay cleanly ── */
.contact-bg {
  background-image: url('/ctusbanner.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ── Shimmer sweep on the button ── */
@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }

  100% {
    transform: translateX(300%) skewX(-15deg);
  }
}

/* ── Slow pulse ring ── */
@keyframes ring-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0px rgba(212, 180, 131, 0.55);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(212, 180, 131, 0);
  }
}

/* ── Fade-up entry ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(36px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Slow horizontal scroll for the stamp-text ── */
@keyframes ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.animate-fade-up {
  animation: fadeUp 1s cubic-bezier(.22, .68, 0, 1.2) both;
}

.delay-200 {
  animation-delay: .2s;
}

.delay-400 {
  animation-delay: .4s;
}

.delay-600 {
  animation-delay: .6s;
}

/* ── CTA button ── */
.cta-btn {
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .18em;
  animation: ring-pulse 2.5s ease-in-out infinite;
}

.cta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  animation: shimmer 2.8s ease-in-out infinite;
}

.cta-btn:hover::after {
  animation-play-state: paused;
}

.cta-btn:hover {
  transform: scale(1.04);
  transition: transform .25s ease;
}


/* ===== Know More 3D Button ===== */
@keyframes know-entrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }

  70% {
    transform: translateY(-5px) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes know-spin-glow {
  0% {
    filter: blur(7px) hue-rotate(0deg);
  }

  100% {
    filter: blur(7px) hue-rotate(360deg);
  }
}

@keyframes know-shimmer {
  0% {
    transform: translateX(-150%) skewX(-15deg);
  }

  100% {
    transform: translateX(350%) skewX(-15deg);
  }
}

@keyframes know-icon-slide {

  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }

  45% {
    transform: translateX(6px);
    opacity: 0;
  }

  46% {
    transform: translateX(-6px);
    opacity: 0;
  }
}

.know-btn-wrap {
  position: relative;
  animation: know-entrance 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
  perspective: 700px;
  display: inline-block;
}

.know-btn-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #1a3a5c, #2e6ea6, #19c6b7);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
}

.know-btn-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.know-btn-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  animation: know-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

.know-btn-inner:hover {
  transform: translateX(8px);
  box-shadow:
    0 4px 20px rgba(25, 198, 183, 0.45),
    0 0 30px 6px rgba(46, 110, 166, 0.25);
  text-decoration: none;
  color: #fff;
}

.know-btn-inner:active {
  transform: translateX(12px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.know-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  animation: know-icon-slide 2.2s ease-in-out infinite;
}

/* Responsiveness */

/* ===== Hero Section ===== */
.hero-content {
  position: relative;
  z-index: 2;
}

/* ===== About Section ===== */
.about {
  padding-block: 0;
  overflow: hidden;
}

/* ===== About page responsiveness ===== */
@media (max-width: 767px) {
  .about-title2 {
    font-size: 28px !important;
  }

  .team-img-1,
  .team-img-2,
  .team-img-3,
  .team-img-4 {
    width: 130px !important;
    height: 160px !important;
  }

  .name {
    font-size: 14px !important;
  }

  .designation {
    font-size: 12px !important;
  }

  .md-div {
    height: auto !important;
    padding-block: 3rem;
  }
}

/* ===== Services Section ===== */
.services img {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.services img:hover {
  transform: scale(1.03);
  opacity: 1 !important;
}

/* ===== Gallery hover ===== */
.gallery-item {
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.02);
}

@media (max-width: 450px) {
  .hbmt {
    font-size: 1.8rem;
  }

  #text1,
  #text2 {
    font-size: 1.8rem;
  }

  .hbp {
    font-size: 0.9rem;
    margin-top: 4rem;
  }

  .hbb {
    width: 10rem;
    font-size: 12px;
  }

  .counter-no span {
    font-size: 20px;
  }

  .counter-text {
    font-size: 10px;
  }

  .about-img-div {
    column-gap: 5px;
  }

}

@media (max-width: 767px) {

  .l-i {
    width: 20px;
  }

  .m-i {
    width: 14px;
  }

  .p-i {
    width: 18px;
  }

  /* home page */
  .hbmt {
    text-align: center;
    margin-left: 0;
    font-size: 2rem;
  }

  #text1,
  #text2 {
    text-align: center;
    margin-left: 0;
    font-size: 2rem;
  }

  .hbcd {
    align-items: center;
    width: 100%;
    padding-inline: 16px;
  }

  .hbcd div {
    margin-left: 0;
  }

  .hbcd div span {
    text-align: center;
  }

  .hbp {
    text-align: center;
    margin-left: 0;
    width: 90%;
    font-size: 0.85rem;
    margin-top: 5rem;
  }

  .hbb {
    margin-left: 0;
    text-align: center;
  }

  /* clients section */
  section.clients {
    padding-block: 8px;
  }

  .clients-text-div {
    padding-left: 15px;
  }

  .brands-heading {
    font-size: 1.15rem;
  }

  /* about section */
  .about {
    padding-top: 0;
    padding-bottom: 12px;
  }

  .about-div {
    flex-direction: column;
    padding-inline: 16px;
    align-items: center;
    gap-y: 24px;
  }

  .about-img-div {
    width: 100%;
    column-gap: 8px;
    row-gap: 8px;
    justify-content: center;
  }

  .about-img1,
  .about-img2,
  .about-img3,
  .about-img4 {
    width: calc(50% - 4px);
    height: 120px;
    object-fit: cover;
    transform: translate(0) !important;
    border-radius: 14px !important;
  }

  .about-content-div {
    width: 100%;
    row-gap: 8px;
    text-align: center;
    align-items: center;
  }

  .about-r-mt {
    font-size: 13px;
  }

  .about-r-t {
    font-size: 22px;
  }

  .about-r-d {
    font-size: 12px;
  }

  .counter-no span {
    font-size: 22px;
  }

  .counter-text {
    font-size: 9px;
  }

  .about-btn {
    width: fit-content;
    padding-inline: 10px;
    font-size: 10px;
  }

  .know-btn-wrap {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }


  /* Know More 3D Button */
  @keyframes know-entrance {
    0% {
      opacity: 0;
      transform: translateY(20px) scale(0.9);
    }

    70% {
      transform: translateY(-5px) scale(1.04);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes know-spin-glow {
    0% {
      filter: blur(7px) hue-rotate(0deg);
    }

    100% {
      filter: blur(7px) hue-rotate(360deg);
    }
  }

  @keyframes know-shimmer {
    0% {
      transform: translateX(-150%) skewX(-15deg);
    }

    100% {
      transform: translateX(350%) skewX(-15deg);
    }
  }

  @keyframes know-icon-slide {

    0%,
    100% {
      transform: translateX(0);
      opacity: 1;
    }

    45% {
      transform: translateX(6px);
      opacity: 0;
    }

    46% {
      transform: translateX(-6px);
      opacity: 0;
    }
  }

  .know-btn-wrap {
    position: relative;
    animation: know-entrance 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
    perspective: 700px;
    display: inline-block;
  }

  .know-btn-inner {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #1a3a5c, #2e6ea6, #19c6b7);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-decoration: none;
    overflow: hidden;
    z-index: 1;
  }

  .know-btn-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }

  .know-btn-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    animation: know-shimmer 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
  }

  .know-btn-inner:hover {
    transform: translateY(8px) rotateX(10deg);
    box-shadow:
      0 1px 0 #0a2035,
      0 2px 0 #071828,
      0 4px 10px rgba(0, 0, 0, 0.35),
      0 0 18px 4px rgba(25, 198, 183, 0.55),
      0 0 30px 6px rgba(46, 110, 166, 0.35);
    text-decoration: none;
    color: #fff;
  }

  .know-btn-inner:active {
    transform: translateY(11px) rotateX(14deg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  }

  .know-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    animation: know-icon-slide 2.2s ease-in-out infinite;
  }

  /* services section */

  .service-title {
    font-size: 15px;
  }

  .services-title2 {
    font-size: 35px;
  }

  #popupImg1 {
    width: 500px;
    height: 300px;
  }

  #popupImg2 {
    width: 500px;
    height: 300px;
  }

  .pu-text {
    font-size: 10px;
  }

  .pu-btn {
    font-size: 12px;
    width: fit-content;
    padding-inline: 10px;
  }

  .team-img-1,
  .team-img-2,
  .team-img-3,
  .team-img-4 {
    width: 125px;
    height: 150px;
  }

  .name {
    font-size: 17px;
  }

  .designation {
    font-size: 14px;
  }

}

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

  .l-i {
    width: 20px;
  }

  .m-i {
    width: 14px;
  }

  .p-i {
    width: 18px;
  }

  .about-div {
    column-gap: 20px;
    padding-inline: 20px;
    align-items: center;
  }

  .about-img-div {
    column-gap: 10px;
  }

  .about-img1,
  .about-img4 {
    width: 200px;
    height: 200px;
    transform: translate(0);
  }

  .about-img1 {
    transform: translatey(5%);
  }

  .about-img4 {
    transform: translatey(-5%);
  }

  .about-img2,
  .about-img3 {
    width: 200px;
    height: 200px;
    transform: translate(0);
  }

  .team-img-1,
  .team-img-2,
  .team-img-3,
  .team-img-4 {
    width: 175px;
    height: 225px;
  }

  .name {
    font-size: 17px;
  }

  .designation {
    font-size: 14px;
  }

}

@media (min-width: 1024px) and (max-width: 1286px) {

  .about-div {
    column-gap: 10px;
    padding-inline: 50px;
    align-items: center;
  }

  .about-img-div {
    column-gap: 10px;
  }

  .about-img2 {
    transform: translatey(-5%);
  }

  .about-img3 {
    transform: translatey(25%);
  }

}

@media (min-width: 1024px) {

  .l-i {
    width: 20px;
  }

  .m-i {
    width: 14px;
  }

  .p-i {
    width: 18px;

  }

}

/* facility services individual page */
@media (max-width: 767px) {

  .fsips {
    padding-inline: 20px;
  }

  .fsiplcd {
    padding-left: 0;
  }

  .fsipc {
    column-gap: 15px;
    justify-content: center;
    align-items: center;
  }

  .fsipmt {
    margin-block: 50px;
    font-size: 35px;
  }

  .fsipt1 {
    font-size: 30px;
    line-height: 1.2em;
  }

  .fsipd1,
  .fsipd2 {
    font-size: 14px;
  }

  .fsipt2 {
    font-size: 17px;
  }

}

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

  .fsips {
    padding-inline: 20px;
  }

  .fsiplcd {
    padding-left: 0;
  }

  .fsipc {
    column-gap: 15px;
    justify-content: center;
    align-items: center;
  }

}

/* materials supply page */
@media (max-width: 767px) {

  .msips {
    padding-inline: 20px;
  }

  .msipcd {
    justify-content: center;
    column-gap: 0;
    padding-block: 3rem;
  }

  .msiplcd {
    padding-left: 1rem;
  }

  .msipmt {
    font-size: 30px;
  }

  .msipt1 {
    font-size: 17px;
    line-height: 1.2em;
  }

  .msipd1,
  .msipd2 {
    font-size: 15px;
  }

  .msipt2 {
    font-size: 25px;
    text-align: center;
  }

}


/* ===== 3D Explore Services Button ===== */
@keyframes btnEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }

  70% {
    transform: translateY(-5px) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes spinGlow {
  0% {
    filter: blur(7px) hue-rotate(0deg);
  }

  100% {
    filter: blur(7px) hue-rotate(360deg);
  }
}

.explore-btn-wrap {
  animation: btnEntrance 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
  perspective: 700px;
  display: inline-block;
}

.explore-btn-inner {
  transform-style: preserve-3d;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.explore-btn-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
  pointer-events: none;
}

.explore-btn-inner::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background: conic-gradient(from 0deg, #19c6b7, #2e6ea6, #ff594b, #f5b105, #19c6b7);
  filter: blur(7px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  animation: spinGlow 3s linear infinite;
}

.explore-btn-wrap:hover .explore-btn-inner {
  transform: translateY(8px) rotateX(10deg);
  box-shadow:
    0 1px 0 #0a2035,
    0 2px 0 #071828,
    0 4px 10px rgba(0, 0, 0, 0.35);
}

.explore-btn-wrap:hover .explore-btn-inner::after {
  opacity: 1;
}

.explore-btn-wrap:active .explore-btn-inner {
  transform: translateY(11px) rotateX(14deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  .explore-btn-wrap {
    margin-left: 0 !important;
    display: block;
    width: fit-content;
    margin-inline: auto;
  }
}

/* ===== WhatsApp Chat Widget ===== */
.wa-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none; /* Prevents container from blocking clicks behind it */
}

/* Floating button */
.wa-toggle-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  border: none;
  cursor: pointer;
  display: flex;
  pointer-events: auto; /* Clickable */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: wa-pulse 2.5s ease-in-out infinite;
}

.wa-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.65);
}

@keyframes wa-pulse {

  0%,
  100% {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
  }

  50% {
    box-shadow: 0 4px 32px rgba(37, 211, 102, 0.85);
  }
}

/* Chat box */
.wa-box {
  width: 320px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transform: scale(0.85) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  transform-origin: bottom right;
}

.wa-box.wa-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* Header */
.wa-header {
  background: #075E54;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wa-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wa-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wa-name {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}

.wa-status {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  margin-top: 2px;
}

.wa-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.2s;
}

.wa-close-btn:hover {
  color: #fff;
}

/* Body */
.wa-body {
  background: #ECE5DD;
  padding: 18px 14px;
  min-height: 110px;
  display: flex;
  align-items: flex-start;
}

.wa-bubble {
  background: #fff;
  border-radius: 0 10px 10px 10px;
  padding: 10px 14px;
  max-width: 85%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.wa-bubble p {
  margin: 0;
  font-size: 14px;
  color: #111;
  line-height: 1.5;
}

.wa-time {
  display: block;
  font-size: 11px;
  color: #999;
  text-align: right;
  margin-top: 4px;
}

/* Footer */
.wa-footer {
  background: #fff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #f0f0f0;
}

.wa-input {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  padding: 9px 16px;
  font-size: 14px;
  outline: none;
  font-family: "Poppins", sans-serif;
  transition: border-color 0.2s;
}

.wa-input:focus {
  border-color: #25D366;
}

.wa-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #25D366;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}

.wa-send-btn:hover {
  background: #1da851;
  transform: scale(1.08);
}

@media (max-width: 480px) {
  .wa-widget {
    bottom: 16px;
    right: 16px;
  }

  .wa-box {
    width: 290px;
  }
}

/* ===== End WhatsApp Chat Widget ===== */

/* ===== About Page — Scroll Reveal Extras ===== */

/* Stagger delays for team cards & FAQ items */
.delay-6 {
  transition-delay: 0.6s;
}

.delay-7 {
  transition-delay: 0.7s;
}

.delay-8 {
  transition-delay: 0.8s;
}

/* Fade-up variant with a longer travel for the hero heading */
.reveal-hero {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-hero.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scale-up for the image card */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Fade-in only (no movement) — used for overlays / stat bars */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.reveal-fade.visible {
  opacity: 1;
}

/* Slide-up for checklist rows */
.reveal-row {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-row.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Team member card — scale + fade */
.reveal-team {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-team.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Quote section — zoom + fade */
.reveal-quote {
  opacity: 0;
  transform: scale(0.92) translateY(30px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}

.reveal-quote.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* FAQ item — slide from left */
.reveal-faq {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-faq.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ===== About Page — Mobile Responsiveness ===== */

/* Hero section first section */
@media (max-width: 640px) {

  /* About Our Company heading */
  .reveal-hero {
    font-size: 1.75rem;
  }

  /* Story text */
  .reveal-left h3 {
    font-size: 1.4rem;
  }

  /* Stats bar inside image card */
  .backdrop-blur-sm .text-2xl {
    font-size: 1.1rem;
  }

  .backdrop-blur-sm .text-sm {
    font-size: 0.65rem;
  }

  .backdrop-blur-sm .grid {
    gap: 0.5rem;
  }

  .backdrop-blur-sm.p-6 {
    padding: 0.75rem;
  }
}

/* Quote section height on mobile */
@media (max-width: 640px) {
  .md-div {
    height: auto !important;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* Mission/Vision text sizes on mobile */
@media (max-width: 640px) {

  .reveal-left h3.md\:text-2xl,
  .reveal-right h3.md\:text-2xl {
    font-size: 1.1rem;
  }
}

/* Team images — ensure proper sizing on all screens */
@media (max-width: 380px) {

  .team-img-1,
  .team-img-2,
  .team-img-3,
  .team-img-4 {
    width: 100px !important;
    height: 130px !important;
  }

  .name {
    font-size: 12px !important;
  }

  .designation {
    font-size: 10px !important;
  }
}

/* FAQ details summary text — prevent overflow */
@media (max-width: 640px) {
  .reveal-faq summary span:first-child {
    font-size: 13px;
  }

  .reveal-faq p {
    font-size: 13px;
  }
}

/* Prevent horizontal scroll on the whole about page */
@media (max-width: 768px) {
  section {
    overflow-x: hidden;
  }
}

/* ===== About Page — Mobile Responsiveness ===== */

/* Prevent horizontal scroll on the whole about page */
@media (max-width: 768px) {
  section {
    overflow-x: hidden;
  }
}

/* Quote section height on mobile */
@media (max-width: 640px) {
  .md-div {
    height: auto !important;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* Team images — extra small screens */
@media (max-width: 380px) {

  .team-img-1,
  .team-img-2,
  .team-img-3,
  .team-img-4 {
    width: 100px !important;
    height: 130px !important;
  }

  .name {
    font-size: 12px !important;
  }

  .designation {
    font-size: 10px !important;
  }
}

/* ===== Contact Page Scroll Animations ===== */

.contact-heading {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.contact-subtext {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

.contact-info-card {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
}

.contact-form-box {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.contact-map-title {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.contact-map-frame {
  opacity: 0;
  transform: scale(0.94) translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.contact-banner-el {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* Visible states triggered by JS IntersectionObserver */
.contact-heading.contact-anim-visible,
.contact-subtext.contact-anim-visible,
.contact-map-title.contact-anim-visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-info-card.contact-anim-visible {
  opacity: 1;
  transform: translateX(0);
}

.contact-form-box.contact-anim-visible {
  opacity: 1;
  transform: translateX(0);
}

.contact-map-frame.contact-anim-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.contact-banner-el.contact-anim-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover lift on info cards only after visible */
.contact-info-card.contact-anim-visible:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ===== 3D Explore Services Button ===== */
@keyframes btnEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }

  70% {
    transform: translateY(-5px) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes spinGlow {
  0% {
    filter: blur(7px) hue-rotate(0deg);
  }

  100% {
    filter: blur(7px) hue-rotate(360deg);
  }
}

.explore-btn-wrap {
  animation: btnEntrance 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
  perspective: 700px;
  display: inline-block;
}

.explore-btn-inner {
  transform-style: preserve-3d;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.explore-btn-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
  pointer-events: none;
}

.explore-btn-inner::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background: conic-gradient(from 0deg, #19c6b7, #2e6ea6, #ff594b, #f5b105, #19c6b7);
  filter: blur(7px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  animation: spinGlow 3s linear infinite;
}

.explore-btn-wrap:hover .explore-btn-inner {
  transform: translateY(8px) rotateX(10deg);
  box-shadow:
    0 1px 0 #0a2035,
    0 2px 0 #071828,
    0 4px 10px rgba(0, 0, 0, 0.35);
}

.explore-btn-wrap:hover .explore-btn-inner::after {
  opacity: 1;
}

.explore-btn-wrap:active .explore-btn-inner {
  transform: translateY(11px) rotateX(14deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  .explore-btn-wrap {
    margin-left: 0 !important;
    display: block;
    width: fit-content;
    margin-inline: auto;
  }
}

/* ===== Hero Banner Entrance Animations ===== */

/* Title: slides in from left with a clip-path curtain reveal */
@keyframes heroTitleIn {
  0% {
    opacity: 0;
    transform: translateX(-60px) skewX(-8deg);
    clip-path: inset(0 100% 0 0);
  }

  60% {
    clip-path: inset(0 0% 0 0);
  }

  80% {
    transform: translateX(6px) skewX(2deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) skewX(0);
    clip-path: inset(0 0% 0 0);
  }
}

/* Subtitle: fades up from below with a soft blur dissolve */
@keyframes heroSubtitleIn {
  0% {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(6px);
  }

  70% {
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Button: springy pop-in scale */
@keyframes heroBtnIn {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(20px);
  }

  65% {
    transform: scale(1.12) translateY(-4px);
  }

  85% {
    transform: scale(0.96) translateY(2px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Hidden base states (before JS fires animation) */
#hero-title {
  opacity: 0;
}

#hero-subtitle {
  opacity: 0;
}

#hero-btn {
  opacity: 0;
}

/* Animated states - toggled by JS */
#hero-title.hero-animate {
  animation: heroTitleIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

#hero-subtitle.hero-animate {
  animation: heroSubtitleIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

#hero-btn.hero-animate {
  animation: heroBtnIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s both;
}

/* ===================================================================
   WCU Cards - Stunning Hover Effects
   =================================================================== */

/* ---- Base card ---- */
.wcu-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  isolation: isolate;
}

/* ---- Coloured top accent bar (slides down on hover) ---- */
.wcu-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.card-blue .wcu-card-accent {
  background: linear-gradient(90deg, #1a3a5c, #2e6ea6, #19c6b7);
}

.card-green .wcu-card-accent {
  background: linear-gradient(90deg, #064e3b, #059669, #34d399);
}

.card-yellow.wcu-card-accent,
.card-yellow .wcu-card-accent {
  background: linear-gradient(90deg, #92400e, #d97706, #fbbf24);
}

.card-pink .wcu-card-accent {
  background: linear-gradient(90deg, #831843, #db2777, #f472b6);
}

/* ---- Inner content wrapper ---- */
.wcu-card-inner {
  position: relative;
  z-index: 3;
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Icon circle ---- */
.wcu-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease;
  background: #f8fafc;
}

.card-blue .wcu-icon-wrap {
  box-shadow: 0 4px 12px rgba(46, 110, 166, 0.18);
}

.card-green .wcu-icon-wrap {
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.18);
}

.card-yellow .wcu-icon-wrap {
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.18);
}

.card-pink .wcu-icon-wrap {
  box-shadow: 0 4px 12px rgba(219, 39, 119, 0.18);
}

/* ---- Pill tag ---- */
.wcu-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  width: fit-content;
  transition: background 0.35s ease, color 0.35s ease;
}

.card-blue .wcu-tag {
  background: rgba(46, 110, 166, 0.10);
  color: #2e6ea6;
}

.card-green .wcu-tag {
  background: rgba(5, 150, 105, 0.10);
  color: #059669;
}

.card-yellow .wcu-tag {
  background: rgba(217, 119, 6, 0.10);
  color: #d97706;
}

.card-pink .wcu-tag {
  background: rgba(219, 39, 119, 0.10);
  color: #db2777;
}

/* ---- Title ---- */
.wcu-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  position: relative;
  padding-bottom: 8px;
  transition: color 0.35s ease;
}

.wcu-card-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-blue .wcu-card-title::after {
  background: linear-gradient(90deg, #2e6ea6, #19c6b7);
}

.card-green .wcu-card-title::after {
  background: linear-gradient(90deg, #059669, #34d399);
}

.card-yellow .wcu-card-title::after {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}

.card-pink .wcu-card-title::after {
  background: linear-gradient(90deg, #db2777, #f472b6);
}

/* ---- Description ---- */
.wcu-card-desc {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.65;
  transition: color 0.35s ease;
}

/* ---- Footer / Learn more ---- */
.wcu-card-footer {
  margin-top: 4px;
}

.wcu-more {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
}

.card-blue .wcu-more {
  color: #2e6ea6;
}

.card-green .wcu-more {
  color: #059669;
}

.card-yellow .wcu-more {
  color: #d97706;
}

.card-pink .wcu-more {
  color: #db2777;
}

.wcu-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* ---- Glow blob behind card ---- */
.wcu-card-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  bottom: -80px;
  right: -60px;
  opacity: 0;
  filter: blur(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 0;
  pointer-events: none;
}

.card-blue .wcu-card-glow {
  background: radial-gradient(circle, rgba(25, 198, 183, 0.45), transparent 70%);
}

.card-green .wcu-card-glow {
  background: radial-gradient(circle, rgba(52, 211, 153, 0.45), transparent 70%);
}

.card-yellow .wcu-card-glow {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.45), transparent 70%);
}

.card-pink .wcu-card-glow {
  background: radial-gradient(circle, rgba(244, 114, 182, 0.45), transparent 70%);
}

/* ================================================================
   HOVER STATES
   ================================================================ */

.wcu-card:hover {
  transform: translateY(-12px) scale(1.025) !important;
  box-shadow:
    0 24px 48px -8px rgba(0, 0, 0, 0.14),
    0 8px 20px -4px rgba(0, 0, 0, 0.08);
}

/* Accent bar expands to full cover then fades to subtle tint */
.wcu-card:hover .wcu-card-accent {
  height: 100%;
  opacity: 0.06;
}

/* Content lifts slightly */
.wcu-card:hover .wcu-card-inner {
  transform: translateY(-2px);
}

/* Icon bounces and gets coloured background */
.wcu-card:hover .wcu-icon-wrap {
  transform: rotate(-8deg) scale(1.18);
}

.card-blue:hover .wcu-icon-wrap {
  background: rgba(46, 110, 166, 0.12);
}

.card-green:hover .wcu-icon-wrap {
  background: rgba(5, 150, 105, 0.12);
}

.card-yellow:hover .wcu-icon-wrap {
  background: rgba(217, 119, 6, 0.12);
}

.card-pink:hover .wcu-icon-wrap {
  background: rgba(219, 39, 119, 0.12);
}

/* Tag brightens */
.card-blue:hover .wcu-tag {
  background: rgba(46, 110, 166, 0.18);
}

.card-green:hover .wcu-tag {
  background: rgba(5, 150, 105, 0.18);
}

.card-yellow:hover .wcu-tag {
  background: rgba(217, 119, 6, 0.18);
}

.card-pink:hover .wcu-tag {
  background: rgba(219, 39, 119, 0.18);
}

/* Title underline sweeps in */
.wcu-card:hover .wcu-card-title::after {
  width: 100%;
}

/* Description slightly darker for readability */
.wcu-card:hover .wcu-card-desc {
  color: #475569;
}

/* "Discover →" fades in */
.wcu-card:hover .wcu-more {
  opacity: 1;
  transform: translateY(0);
}

/* Arrow nudges right on hover of the more link */
.wcu-card:hover .wcu-arrow {
  transform: translateX(4px);
}

/* Glow appears */
.wcu-card:hover .wcu-card-glow {
  opacity: 1;
  transform: scale(1.2) translate(-10px, -10px);
}

/* Coloured left border flash */
.wcu-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 20px 0 0 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.card-blue::before {
  background: linear-gradient(180deg, #1a3a5c, #19c6b7);
}

.card-green::before {
  background: linear-gradient(180deg, #064e3b, #34d399);
}

.card-yellow::before {
  background: linear-gradient(180deg, #92400e, #fbbf24);
}

.card-pink::before {
  background: linear-gradient(180deg, #831843, #f472b6);
}

.wcu-card:hover::before {
  opacity: 1;
}

/* Override: disable old simple .card:hover for wcu-cards */
.wcu-card.card:not(:hover) {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.wcu-card.card:hover {
  transform: translateY(-12px) scale(1.025) !important;
}

/* ===========================================================
   GALLERY SECTION — Scroll Animations & Hover Effects
   =========================================================== */

/* ---- Section heading ---- */
.gallery-heading {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.gallery-heading.gallery-heading-visible {
  opacity: 1;
  transform: translateY(0);
}

.gallery-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF594B;
  margin-bottom: 8px;
  position: relative;
  padding: 0 20px;
}

.gallery-label::before,
.gallery-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28px;
  height: 1.5px;
  background: #FF594B;
}

.gallery-label::before {
  right: 100%;
  transform: translateX(16px);
}

.gallery-label::after {
  left: 100%;
  transform: translateX(-16px);
}

.gallery-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #1e293b;
  margin: 6px 0 14px;
  line-height: 1.2;
}

/* Animated underline bar */
.gallery-underline {
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF594B, #2e6ea6, #19c6b7);
  border-radius: 3px;
  margin: 0 auto;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.gallery-heading.gallery-heading-visible .gallery-underline {
  width: 80px;
}

/* ---- Individual items — scroll entrance ---- */
@keyframes galleryFadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.94);
  }

  70% {
    transform: translateY(-4px) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes galleryFadeLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px) scale(0.94);
  }

  70% {
    transform: translateX(4px) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes galleryFadeRight {
  0% {
    opacity: 0;
    transform: translateX(50px) scale(0.94);
  }

  70% {
    transform: translateX(-4px) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.gallery-anim {
  opacity: 0;
}

/* Alternate entrance directions by nth-child */
.gallery-anim:nth-child(odd) {
  transform: translateX(-40px);
}

.gallery-anim:nth-child(even) {
  transform: translateX(40px);
}

.gallery-anim.gallery-visible {
  animation: galleryFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gallery-anim:nth-child(1).gallery-visible {
  animation-name: galleryFadeLeft;
}

.gallery-anim:nth-child(2).gallery-visible {
  animation-name: galleryFadeUp;
}

.gallery-anim:nth-child(3).gallery-visible {
  animation-name: galleryFadeRight;
}

.gallery-anim:nth-child(4).gallery-visible {
  animation-name: galleryFadeLeft;
}

.gallery-anim:nth-child(5).gallery-visible {
  animation-name: galleryFadeUp;
}

.gallery-anim:nth-child(6).gallery-visible {
  animation-name: galleryFadeRight;
}

/* ---- Gallery item base ---- */
.gallery-item {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ---- Image zoom on hover ---- */
.gallery-img {
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
  will-change: transform;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.1);
  filter: brightness(0.75) saturate(1.2);
}

/* ---- Card lift on hover ---- */
.gallery-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 20px 40px -8px rgba(0, 0, 0, 0.22),
    0 8px 16px -4px rgba(0, 0, 0, 0.1);
  z-index: 5;
}

/* ---- Overlay (camera icon + tint) ---- */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(26, 58, 92, 0.6) 0%,
      rgba(25, 198, 183, 0.45) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: inherit;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay-icon {
  font-size: 2rem;
  transform: scale(0.5) rotate(-15deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s,
    opacity 0.35s ease 0.05s;
  opacity: 0;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.gallery-item:hover .gallery-overlay-icon {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

/* Coloured border flash on hover */
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2.5px solid transparent;
  background: linear-gradient(135deg, #FF594B, #2e6ea6, #19c6b7) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 10;
}

.gallery-item:hover::after {
  opacity: 1;
}


/* ========================================================
   COMPREHENSIVE RESPONSIVE FIXES — All Pages
   ======================================================== */

/* ── Global base ── */
html,
body {
  overflow-x: clip;
  max-width: 100vw;
}

section {
  overflow-x: clip;
}

/* ── Utility: prevent huge section gaps ── */
@media (max-width: 767px) {

  /* Testimonial section: remove min-h-screen */
  .testimonial .bg-gray-50.min-h-screen {
    min-height: unset !important;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Testimonial heading: reduce mb-16 */
  .testimonial .text-center.mb-16 {
    margin-bottom: 2rem !important;
  }

  /* Contact banner: remove min-h-screen */
  .contact-bg.contact-banner-section {
    min-height: 70vh !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .testimonial .bg-gray-50.min-h-screen {
    min-height: unset !important;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .contact-bg.contact-banner-section {
    min-height: 60vh !important;
  }
}

/* ============================================================
   HOME PAGE
   ============================================================ */

/* ── Hero section ── */
@media (max-width: 480px) {
  #hero-section {
    min-height: 100svh;
  }

  .hbcd {
    padding-inline: 16px !important;
    width: 100% !important;
  }

  .hbmt,
  #text1,
  #text2 {
    font-size: 1.6rem !important;
    margin-left: 0 !important;
    text-align: center !important;
  }

  .hbp {
    width: 100% !important;
    font-size: 0.8rem !important;
    margin-top: 2.5rem !important;
    text-align: center !important;
    margin-left: 0 !important;
  }

  .explore-btn-wrap {
    margin-left: 0 !important;
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    width: 100% !important;
  }
}

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

  .hbmt,
  #text1,
  #text2 {
    font-size: 1.9rem !important;
    margin-left: 0 !important;
    text-align: center !important;
  }

  .hbp {
    width: 95% !important;
    font-size: 0.85rem !important;
    margin-top: 3rem !important;
    text-align: center !important;
    margin-left: 0 !important;
  }
}

/* ── Clients section ── */
@media (max-width: 767px) {
  .clients>div {
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
  }

  .clients-text-div {
    width: 100% !important;
    padding-left: 0 !important;
    text-align: center;
  }

  .clients-text-div>div {
    font-size: 1rem !important;
  }

  .carousel {
    width: 100% !important;
    margin: 1rem auto !important;
  }

  .item {
    flex: 0 0 33.33% !important;
  }

  .item img {
    width: 70px !important;
    height: 44px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .clients>div {
    gap: 0;
  }

  .clients-text-div {
    width: 30% !important;
    padding-left: 1rem !important;
  }

  .carousel {
    width: 70% !important;
    margin: 1.5rem auto !important;
  }

  .item {
    flex: 0 0 25% !important;
  }
}

/* ── About section (home) ── */
@media (max-width: 767px) {
  .about {
    padding-top: 0 !important;
    padding-bottom: 2.5rem !important;
  }

  .about-div {
    flex-direction: column !important;
    padding-inline: 1rem !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }

  .about-img-div {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
  }

  .about-img1,
  .about-img2,
  .about-img3,
  .about-img4 {
    width: calc(50% - 4px) !important;
    height: 120px !important;
    object-fit: cover !important;
    transform: none !important;
    border-radius: 14px !important;
  }

  .about-content-div {
    width: 100% !important;
    text-align: center !important;
    align-items: center !important;
  }

  /* Force about image wrapper cells to fill the grid column */
  .about-img-div>div {
    width: 100% !important;
    height: 120px !important;
    overflow: hidden;
    border-radius: 14px;
  }

  /* Override Tailwind's fixed w-[250px] on all about images */
  .about-img1,
  .about-img2,
  .about-img3,
  .about-img4 {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
    border-radius: 14px !important;
  }

  .about-r-t {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
  }

  .about-r-mt {
    font-size: 0.8rem !important;
  }

  .about-r-d {
    font-size: 0.8rem !important;
  }

  .counter-no span {
    font-size: 1.5rem !important;
  }

  .counter-text {
    font-size: 0.65rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .about-div {
    padding-inline: 2rem !important;
    gap: 1.5rem !important;
  }

  .about-img1,
  .about-img2,
  .about-img3,
  .about-img4 {
    width: 170px !important;
    height: 170px !important;
  }

  .about-r-t {
    font-size: 2rem !important;
  }
}

/* ── Services section (home) ── */
@media (max-width: 767px) {
  .services {
    margin-top: 2rem !important;
  }

  .services>div>div:last-child {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
    padding-bottom: 2rem !important;
    padding-inline: 1rem !important;
  }

  #popupImg1,
  #popupImg2 {
    width: 100% !important;
    max-width: 340px !important;
    height: 260px !important;
    object-fit: cover !important;
  }

  .services-title2 {
    font-size: 1.6rem !important;
  }

  .service-title {
    font-size: 0.85rem !important;
    padding-bottom: 0.5rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .services>div>div:last-child {
    gap: 2rem !important;
    padding-inline: 2rem !important;
  }

  #popupImg1,
  #popupImg2 {
    width: 340px !important;
    height: 380px !important;
  }

  .services-title2 {
    font-size: 2rem !important;
  }
}

/* ── WCU section (home) ── */
@media (max-width: 767px) {
  .wcu {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .wcu .max-w-7xl {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .wcu h2 {
    font-size: 1.8rem !important;
    margin-bottom: 0.75rem !important;
  }

  .wcu p.text-lg {
    font-size: 0.9rem !important;
  }

  .wcu .grid.sm\\:grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  .wcu-card-inner {
    padding: 16px 14px 14px !important;
    gap: 6px !important;
  }

  .wcu-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.2rem !important;
  }

  .wcu-card-title {
    font-size: 0.85rem !important;
  }

  .wcu-card-desc {
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 380px) {
  .wcu .grid.sm\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Gallery section (home) ── */
@media (max-width: 767px) {
  #gallery-section {
    padding-bottom: 2rem !important;
  }

  .gallery-title {
    font-size: 1.6rem !important;
  }
}

/* ── Testimonials section (home) ── */
@media (max-width: 767px) {
  .testimonial .text-center h2 {
    font-size: 1.6rem !important;
    margin-bottom: 0.5rem !important;
  }

  .testimonial .text-center p.text-xl {
    font-size: 0.9rem !important;
  }

  .testimonial-card .bg-white {
    padding: 1.25rem !important;
  }

  .testimonial-card .text-gray-600.italic {
    font-size: 0.85rem !important;
  }

  .nav-button {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ── Contact banner (home page bottom) ── */
@media (max-width: 767px) {
  section.relative.h-\\[450px\\] {
    height: auto !important;
  }

  section.relative .contact-banner.reveal {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}


/* ============================================================
   CONTACT PAGE
   ============================================================ */

@media (max-width: 767px) {
  .contact-main-section {
    padding-inline: 1rem !important;
    padding-block: 2.5rem !important;
  }

  .contact-heading {
    font-size: 1.5rem !important;
  }

  .contact-form-box {
    padding: 1.25rem !important;
  }

  .contact-map-section {
    padding-bottom: 2rem !important;
  }

  .contact-map-frame iframe {
    height: 250px !important;
  }

  .contact-bg.contact-banner-section {
    min-height: 60vh !important;
  }

  .contact-banner-section h2 {
    font-size: 2rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .contact-main-section {
    padding-inline: 2rem !important;
  }

  .contact-map-frame iframe {
    height: 350px !important;
  }
}


/* ============================================================
   ABOUT PAGE
   ============================================================ */

@media (max-width: 767px) {

  /* Hero section */
  .about-page-hero,
  section.bg-white.relative .mx-auto.px-4.py-16 {
    padding-top: 2rem !important;
    padding-bottom: 0 !important;
  }

  section.bg-white.relative .md\\:mb-24 {
    margin-bottom: 1.5rem !important;
  }

  /* Quote section */
  section.relative.mt-16 {
    margin-top: 2rem !important;
  }

  .md-div {
    height: auto !important;
    min-height: 280px !important;
    padding-block: 2.5rem !important;
  }

  /* Team section */
  section.mt-4.mb-20 {
    margin-bottom: 2rem !important;
  }

  .team-section .display.flex {
    gap-x: 0.5rem !important;
  }

  /* FAQ */
  section.my-10.md\\:my-20 {
    margin-block: 2rem !important;
    padding-block: 0.5rem 1.5rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  section.relative.mt-16 {
    margin-top: 2rem !important;
  }
}


/* ============================================================
   FACILITY SERVICES PAGE (card grid)
   ============================================================ */

@media (max-width: 480px) {

  /* Make service cards full-width / 2-column on tiny screens */
  .facilityServices-grid,
  section.lg\\:px-20 .grid.gap-5 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  /* Reduce fixed card heights */
  section.lg\\:px-20 a.group>div {
    height: 260px !important;
    width: 100% !important;
  }

  section.lg\\:px-20 h2 {
    font-size: 1.4rem !important;
  }

  section.lg\\:px-20 .grid.gap-5 a {
    width: 100% !important;
  }

  /* Card title font */
  section.lg\\:px-20 .translate-y-\\[78\\%\\] p,
  section.lg\\:px-20 .translate-y-\\[65\\%\\] p {
    font-size: 0.85rem !important;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  section.lg\\:px-20 a.group>div {
    height: 300px !important;
    width: 100% !important;
  }

  section.lg\\:px-20 h2 {
    font-size: 1.6rem !important;
  }
}

@media (max-width: 767px) {
  section.lg\\:px-20 {
    padding-inline: 0.75rem !important;
    padding-block: 1.5rem !important;
  }

  section.lg\\:px-20>div {
    padding-inline: 0 !important;
    padding-block: 0.5rem !important;
  }

  section.lg\\:px-20>div>div {
    padding-top: 1.5rem !important;
  }
}


/* ============================================================
   INDIVIDUAL SERVICE PAGES (fsips, msips classes)
   ============================================================ */

@media (max-width: 480px) {

  .fsipmt,
  .msipmt {
    font-size: 1.4rem !important;
    margin-block: 1.5rem !important;
  }

  .fsipt1,
  .msipt1 {
    font-size: 1.2rem !important;
  }

  .fsipd1,
  .fsipd2,
  .msipd1,
  .msipd2 {
    font-size: 0.8rem !important;
  }

  .fsipt2,
  .msipt2 {
    font-size: 1rem !important;
  }
}


/* ============================================================
   HERO BANNER (breadcrumb style banners on sub-pages)
   ============================================================ */

@media (max-width: 480px) {

  /* Breadcrumb banners on service pages */
  section.relative.h-100 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  section.relative.h-100 h1 {
    font-size: 1.4rem !important;
  }

  section.relative.h-100 p {
    font-size: 0.8rem !important;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  section.relative.h-100 h1 {
    font-size: 1.7rem !important;
  }

  section.relative.h-100 p {
    font-size: 0.875rem !important;
  }
}


/* ============================================================
   FOOTER
   ============================================================ */

@media (max-width: 767px) {
  .f-1 {
    padding-top: 2.5rem !important;
    padding-bottom: 2rem !important;
    gap: 2rem !important;
  }
}


/* ============================================================
   MATERIALS SUPPLY PAGE
   ============================================================ */

@media (max-width: 767px) {
  .msipcd {
    padding-block: 1.5rem !important;
  }

  .msiplcd {
    padding-left: 0.5rem !important;
  }
}


/* ============================================================
   GENERAL SECTION SPACING REDUCTIONS (mobile)
   ============================================================ */

@media (max-width: 767px) {

  /* Reduce large mt/mb utility classes */
  .mt-24 {
    margin-top: 2rem !important;
  }

  .mt-16 {
    margin-top: 1.5rem !important;
  }

  .mb-20 {
    margin-bottom: 2rem !important;
  }

  .mb-16 {
    margin-bottom: 1.5rem !important;
  }

  .py-24 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .py-20 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .py-16 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-12 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .pb-20 {
    padding-bottom: 2rem !important;
  }

  .pb-16 {
    padding-bottom: 1.5rem !important;
  }

  .pb-12 {
    padding-bottom: 1.25rem !important;
  }

  .pt-14 {
    padding-top: 2rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .mt-24 {
    margin-top: 3rem !important;
  }

  .mb-20 {
    margin-bottom: 2.5rem !important;
  }

  .py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .pb-20 {
    padding-bottom: 2.5rem !important;
  }
}


/* ============================================================
   SMALL SCREEN TYPOGRAPHY SCALE (<360px)
   ============================================================ */

@media (max-width: 360px) {
  .about-r-t {
    font-size: 1.3rem !important;
  }

  .services-title2 {
    font-size: 1.4rem !important;
  }

  .gallery-title {
    font-size: 1.3rem !important;
  }

  .wcu h2 {
    font-size: 1.5rem !important;
  }

  .wcu-card-title {
    font-size: 0.78rem !important;
  }

  .wcu-card-desc {
    font-size: 0.7rem !important;
  }
}


/* ============================================================
   PREVENT HORIZONTAL OVERFLOW — universal fix
   ============================================================ */

img {
  max-width: 100%;
}

/* Card images inside flip cards MUST fill full height & width — never let height:auto shrink them */
.group img,
[class*="backface-visibility"] img,
[class*="transform-style"] img,
.group [class*="inset-0"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.about-div,
.clients>div,
.services>div,
.wcu .max-w-7xl,
.testimonial .max-w-7xl,
section.relative.h-100,
.contact-main-section .max-w-7xl {
  box-sizing: border-box;
}


/* ============================================================
   POPUP IMAGES (home services section) — mobile fix
   ============================================================ */

@media (max-width: 767px) {

  .popup1,
  .popup2 {
    width: 100% !important;
  }

  .popup1>div,
  .popup2>div {
    width: 85% !important;
    padding: 1rem !important;
  }

  .pu-text {
    font-size: 0.75rem !important;
  }

  .pu-btn {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.6rem !important;
  }
}


/* ============================================================
   TEAM SECTION — responsive card sizes
   ============================================================ */

@media (max-width: 480px) {

  .team-img-1,
  .team-img-2,
  .team-img-3,
  .team-img-4 {
    width: 90px !important;
    height: 120px !important;
  }

  .name {
    font-size: 11px !important;
  }

  .designation {
    font-size: 10px !important;
  }
}

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

  .team-img-1,
  .team-img-2,
  .team-img-3,
  .team-img-4 {
    width: 120px !important;
    height: 155px !important;
  }

  .name {
    font-size: 13px !important;
  }

  .designation {
    font-size: 11px !important;
  }
}


/* ============================================================
   CAROUSEL (brands) — item count adjustment
   ============================================================ */

@media (max-width: 480px) {
  .item {
    flex: 0 0 33.33% !important;
  }

  .item img {
    width: 60px !important;
    height: 38px !important;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .item {
    flex: 0 0 25% !important;
  }

  .item img {
    width: 70px !important;
    height: 44px !important;
  }
}

/* ============================================================
   SERVICE CARDS (flip cards) — mobile responsiveness
   ============================================================ */

/* Back face text + button scale down on small screens */
@media (max-width: 480px) {

  /* Inner back face content */
  [class*="rotateY"] p.text-lg {
    font-size: 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }

  [class*="rotateY"] button {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.6rem !important;
  }

  /* Front face card title */
  [class*="translate-y-\[78\%\]"] p,
  [class*="translate-y-\[65\%\]"] p {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
  }
}

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

  [class*="translate-y-\[78\%\]"] p,
  [class*="translate-y-\[65\%\]"] p {
    font-size: 0.95rem !important;
  }
}

/* Ensure cards don't overflow their container */
.group.flex.justify-center {
  min-width: 0;
}

/* Fix card items overflowing grid on small screens */
@media (max-width: 640px) {
  .group.flex.justify-center {
    width: 100%;
  }

  .group.flex.justify-center>div {
    width: 100% !important;
    max-width: 280px;
    margin: 0 auto;
  }
}


/* ============================================================
   SLIDER HEIGHT FIX — matches left content height exactly
   Strategy: flex row (.msipcd) uses align-items:stretch so
   both .msiplcd (text) and .msiprcd (slider) are always the
   same height. Slider chain uses height:100% all the way down.
   ============================================================ */

/* Row container: both sides stretch to the tallest child */
.msipcd {
  align-items: stretch !important;
}

/* Right slider column: fill 100% of the flex row height */
.msiprcd {
  align-self: stretch;
  height: auto;
  /* let flex determine the height */
  display: flex;
  flex-direction: column;
}

/* The overflow-hidden wrapper fills 100% of .msiprcd */
.msiprcd>div[class*="overflow-hidden"] {
  flex: 1 1 0;
  /* grow to fill available space */
  min-height: 0;
  /* prevent overflow in flex context */
  height: 100% !important;
}

/* The absolute black overlay fills the full wrapper */
.msiprcd>div[class*="bg-black"],
.msiprcd>div[class*="rounded-lg"][class*="absolute"] {
  height: 100% !important;
}

/* Slide track: fill 100% of the overflow-hidden wrapper */
.msiprcd .flex[style*="translateX"] {
  height: 100%;
}

/* Each slide panel: fill 100% of the track */
.msiprcd [class*="min-w-full"] {
  height: 100% !important;
  min-height: 12rem;
  /* safety floor so empty slides don't collapse */
}

/* Left text column: vertically centered, minimum comfortable height */
.msiplcd {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* On mobile the row stacks vertically — give slider a minimum height */
@media (max-width: 767px) {
  .msiprcd {
    min-height: 16rem;
    width: 100% !important;
  }

  .msipcd {
    flex-direction: column !important;
  }

  .msiplcd {
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .msiprcd {
    min-height: 18rem;
  }
}

/* ============================================================
   HEADER MEGA DROPDOWN — Materials Supply / Facility Services
   ============================================================ */

header.header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

body.body {
  padding-top: 68px !important;
}

@media (min-width: 1024px) {
  body.body {
    padding-top: 76px !important;
  }
}

/* Defensive override: the header nav (.menu) uses overflow-y-auto
   on mobile to scroll a tall stacked menu, but on desktop that
   same overflow rule was clipping the floating dropdown panel
   (it never appeared, only a stray scrollbar showed up). Force
   it visible at desktop width regardless of utility-class order. */
@media (min-width: 1024px) {
  header .menu {
    overflow: visible !important;
  }
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  color: inherit;
  padding: 0;
}

/* The visible text is now a real link (so clicking it navigates to
   the listing page) rather than plain text inside the toggle. Strip
   default anchor styling so it still looks like the rest of the nav. */
.nav-dropdown-label {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.nav-dropdown-label:hover,
.nav-dropdown-label:focus-visible {
  color: inherit;
  text-decoration: none;
}

.nav-caret {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #b08400;
}

/* Caret flips on hover (desktop) / open state (mobile) */
.nav-dropdown:hover .nav-caret,
.nav-dropdown.dropdown-open .nav-caret {
  transform: rotate(180deg);
}

/* Desktop-only floating mega-dropdown rules */
@media (min-width: 1024px) {
  /* ---- The dropdown panel ---- */
  .mega-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 8px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.08);
    width: min(560px, 92vw);
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
    z-index: 60;
  }

  /* small upward-pointing arrow / beak on the panel */
  .mega-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: -2px -2px 6px rgba(15, 23, 42, 0.03);
  }

  .mega-dropdown-inner {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 10px;
    max-height: min(60vh, calc(100vh - 220px));
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  /* No-JS fallback: open on pure CSS hover/focus */
  .nav-dropdown:hover .mega-dropdown,
  .nav-dropdown:focus-within .mega-dropdown {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
    visibility: visible;
  }

  /* Open via JS-toggled class */
  .nav-dropdown.dropdown-open .mega-dropdown {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
    visibility: visible;
  }

  /* Edge-aware repositioning */
  .nav-dropdown.mega-dropdown--right .mega-dropdown {
    left: auto;
    right: 0;
    transform: translateY(8px);
  }

  .nav-dropdown.mega-dropdown--right:hover .mega-dropdown,
  .nav-dropdown.mega-dropdown--right.dropdown-open .mega-dropdown {
    transform: translateY(0);
  }

  .nav-dropdown.mega-dropdown--right .mega-dropdown::before {
    left: auto;
    right: 24px;
    transform: rotate(45deg);
  }
}

/* ---- Individual dropdown link ---- */
.mega-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  color: #1e293b;
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease;
  isolation: isolate;
}

/* animated gradient sweep on hover */
.mega-dropdown-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(245, 177, 5, 0.16), rgba(245, 177, 5, 0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  border-radius: 10px;
}

.mega-dropdown-item:hover,
.mega-dropdown-item:focus-visible {
  color: #92660a;
  transform: translateX(4px);
  background-color: rgba(245, 177, 5, 0.08);
}

.mega-dropdown-item:hover::after,
.mega-dropdown-item:focus-visible::after {
  transform: scaleX(1);
}

/* ============================================================
   RESPONSIVE: tablet / mobile behaviour for mega dropdown
   ============================================================ */

/* Below desktop nav breakpoint (Tailwind 'lg' = 1024px):
   the dropdown is opened via tap (JS toggles .dropdown-open)
   and is shown inline, beneath its trigger, full width,
   matching the stacked mobile menu rather than floating. */
@media (max-width: 1023px) {
  .nav-dropdown-toggle {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
  }

  .nav-dropdown {
    width: 100% !important;
    position: relative !important;
  }

  .mega-dropdown,
  .nav-dropdown .mega-dropdown,
  .nav-dropdown.dropdown-open .mega-dropdown,
  .nav-dropdown.mega-dropdown--right .mega-dropdown,
  .nav-dropdown.mega-dropdown--right.dropdown-open .mega-dropdown {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.5rem !important;
    max-height: 0;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
    transition: max-height 0.35s ease, padding 0.2s ease !important;
  }

  .menu {
    max-height: calc(100vh - 68px) !important;
    overflow-y: auto !important;
    padding-bottom: 2.5rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .mega-dropdown::before {
    display: none !important;
  }

  .nav-dropdown.dropdown-open .mega-dropdown {
    max-height: 220px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto !important;
    padding: 6px 4px !important;
    border-left: 3px solid #19c6b7 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
  }

  #dropdown-facility.mega-dropdown,
  .nav-dropdown.dropdown-open #dropdown-facility {
    border-left: 3px solid #FF594B !important;
  }

  .mega-dropdown::-webkit-scrollbar,
  .ifm-submenu::-webkit-scrollbar {
    width: 4px;
  }
  .mega-dropdown::-webkit-scrollbar-thumb,
  .ifm-submenu::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
  }

  .mega-dropdown-inner,
  .mega-dropdown-inner--single {
    grid-template-columns: 1fr !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 2px 4px !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mega-dropdown-item {
    padding: 7px 10px !important;
    font-size: 0.82rem !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    border-radius: 6px !important;
    border-bottom: 1px solid #f1f5f9;
  }
  .mega-dropdown-item:last-child {
    border-bottom: none;
  }

  .mega-dropdown-item:hover,
  .mega-dropdown-item:focus-visible {
    transform: none !important;
    background: #e2e8f0 !important;
    color: #FF594B !important;
  }

  .ifm-trigger {
    white-space: normal !important;
    font-size: 0.84rem !important;
    padding: 7px 10px !important;
    border-radius: 6px !important;
    background: #edf2f7 !important;
  }

  .ifm-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .ifm-parent.ifm-open .ifm-submenu {
    max-height: 190px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 4px !important;
  }
}

@media (max-width: 480px) {
  .mega-dropdown-inner {
    padding: 6px;
  }

  .mega-dropdown-item {
    padding: 9px 10px;
    font-size: 0.8rem;
  }
}

/* Slightly narrower 2-col panel for medium desktop widths so it
   never overflows the viewport on smaller laptop screens */
@media (min-width: 1024px) and (max-width: 1199px) {
  .mega-dropdown {
    width: min(480px, 90vw);
  }
}

/* ============================================================
   NESTED SERVICES DROPDOWN — IFM two-level flyout
   ============================================================ */

/* The Services panel only ever holds the single IFM row, so it
   should hug that content instead of inheriting the fixed 560px
   width meant for the 2-column Materials Supply grid — otherwise
   there's a large dead gap between the label and the arrow.
   Desktop only — mobile/tablet keeps the full-width accordion. */
@media (min-width: 1024px) {

  .mega-dropdown.mega-dropdown--fit,
  .mega-dropdown:has(.mega-dropdown-inner--single) {
    width: max-content;
    max-width: min(360px, 92vw);
  }
}

/* Level-1 panel: single column. On desktop it sizes to its content;
   on mobile/tablet it stretches full width inside the accordion
   (the .mega-dropdown-item rows below already handle that layout). */
.mega-dropdown-inner--single {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 8px !important;
  /* CRITICAL: must not clip the flyout that escapes to the right */
  overflow: visible !important;
}

@media (min-width: 1024px) {
  .mega-dropdown-inner--single {
    width: max-content;
    min-width: 280px;
  }
}

/* IFM parent wrapper — relative anchor for the flyout */
.ifm-parent {
  position: relative;
}

/* The IFM trigger row */
.ifm-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  cursor: pointer;
  font-weight: 500;
  color: #1e293b;
  user-select: none;
  white-space: nowrap;
}

.ifm-arrow {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: #b08400;
  width: 12px;
  height: 12px;
}

/* Rotate arrow when submenu is open */
.ifm-parent.ifm-open .ifm-arrow {
  transform: rotate(90deg);
}

/* ---- Desktop: flyout panel to the right ---- */
@media (min-width: 1024px) {
  .ifm-submenu {
    position: absolute;
    top: -8px;
    left: calc(100% + 6px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.1);
    width: 460px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
    z-index: 80;
  }

  .ifm-submenu-inner {
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 10px;
    max-height: min(70vh, calc(100vh - 160px));
    overflow-y: auto;
    border-radius: 16px;
    background: #ffffff;
  }

  /* Open on hover of the parent row OR JS-toggled class */
  .ifm-parent:hover .ifm-submenu,
  .ifm-parent.ifm-open .ifm-submenu {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  /* Edge-aware flip: when the panel itself is right-aligned (or there
     simply isn't 460px of room to the right of the trigger), JS adds
     this class so the flyout opens to the LEFT of the trigger instead
     of running off the right edge of the viewport. */
  .ifm-parent.ifm-flip-left .ifm-submenu {
    left: auto;
    right: calc(100% + 6px);
    transform: translateX(-10px);
  }

  .ifm-parent.ifm-flip-left:hover .ifm-submenu,
  .ifm-parent.ifm-flip-left.ifm-open .ifm-submenu {
    transform: translateX(0);
  }
}

/* ---- Mobile / tablet: accordion below the trigger ---- */
@media (max-width: 1023px) {
  .ifm-submenu {
    position: static;
    width: 100%;
    background: #f1f5f9;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-top: 4px;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: none;
    transition: max-height 0.35s ease;
  }

  .ifm-parent.ifm-open .ifm-submenu {
    max-height: 900px;
    pointer-events: auto;
  }

  .ifm-submenu-inner {
    display: grid;
    grid-template-columns: 1fr;
    padding: 6px;
    gap: 2px;
    background: transparent;
  }
}


/* ============================================================
   WIRING & CABLES — 3-COLUMN REVEAL (scoped to this section
   only — Electricals & Lightings page, section #1).
   Does NOT touch .msipcd / .msiprcd / .msiplcd, which are
   still used by the other 3 sections on this same page.

   On hover (.is-active), the row splits into 3 real columns:
     Column 1 — .wc-left-zone   → 20% (circular title card)
     Column 2 — .wc-desc-zone   → 30% (description text)
     Column 3 — .wc-fan-zone    → 50% (3 straight, side-by-side images)
   ============================================================ */

.wc-reveal-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding-block: 5rem;
  padding-inline: 2rem;
  overflow: visible;
}

/* ---------- COLUMN 1 (20%): circular title card ---------- */

.wc-left-zone {
  position: relative;
  z-index: 20;
  width: 20%;
  flex: 0 0 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.45s ease, flex-basis 0.45s ease;
}

.wc-circle-card {
  position: relative;
  z-index: 5;
  width: 220px;
  height: 220px;
  min-width: 220px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #f4f4f4);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 89, 75, 0.08);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  animation: wcCircleBreathe 3.2s ease-in-out infinite;
}

.wc-circle-card.is-active {
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.22), 0 0 0 4px rgba(255, 89, 75, 0.18);
  transform: scale(1.04);
  animation-play-state: paused;
}

@keyframes wcCircleBreathe {

  0%,
  100% {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 89, 75, 0.08);
  }

  50% {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(255, 89, 75, 0.12);
  }
}

.wc-circle-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #FF594B;
  padding-inline: 12px;
}

/* ---------- COLUMN 2 (30%): description, its own column ---------- */

.wc-desc-zone {
  position: relative;
  z-index: 15;
  width: 30%;
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  padding-inline: 1.5rem;
  transition: width 0.45s ease, flex-basis 0.45s ease;
}

.wc-description {
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
  opacity: 1;
  transform: none;
  transition: color 0.3s ease;
}

.wc-description.is-active {
  color: #111827;
}

/* ---------- COLUMN 3 (50%): straight images, 2x2 grid ---------- */

.wc-fan-zone {
  position: relative;
  z-index: 10;
  width: 50%;
  flex: 0 0 50%;
  height: 316px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  transition: width 0.45s ease, flex-basis 0.45s ease;
}

.wc-fan-image {
  position: relative;
  min-height: 0;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  opacity: 1;
  transform: none;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease;
}

.wc-fan-1,
.wc-fan-2,
.wc-fan-3,
.wc-fan-4 {
  opacity: 1;
  transform: none;
}

.wc-fan-image:hover,
.wc-fan-image.is-active:hover {
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.32);
  transform: translateY(-4px) scale(1.03);
  z-index: 2;
}

/* ---------- TABLET ---------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .wc-fan-zone {
    height: 256px;
    gap: 10px;
  }

  .wc-fan-image {
    transform: none;
    opacity: 1;
  }
}

/* ---------- MOBILE: no hover, so graceful stacked fallback ---------- */

@media (max-width: 767px) {
  .wc-reveal-row {
    flex-direction: column;
    padding-block: 2.5rem;
    padding-inline: 1rem;
    min-height: 0;
  }

  .wc-left-zone,
  .wc-desc-zone,
  .wc-fan-zone {
    width: 100%;
    flex: 1 1 100%;
  }

  .wc-left-zone {
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  .wc-circle-card {
    width: 170px;
    height: 170px;
    min-width: 170px;
    margin-inline: auto;
    animation: none;
  }

  .wc-circle-title {
    font-size: 18px;
  }

  /* On touch devices there's no hover, so reveal the description
     and images directly under the circle in a simple fade-in
     stacked column instead of the side-by-side row. */
  .wc-desc-zone {
    padding-inline: 0;
  }

  .wc-description {
    text-align: center;
    margin-top: 0;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wc-fan-zone {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }

  .wc-fan-image {
    flex: 1 1 auto;
    width: 100%;
    max-width: 320px;
    height: 170px;
    margin-inline: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.stat-card {
  box-shadow: 0 4px 20px rgba(25, 198, 183, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 8px 28px rgba(25, 198, 183, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* ============================================================
   GLOBAL UI POLISH
   ============================================================ */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Nav link hover underline effect */
.menu .menu-item a:not(.inline-flex):not(.know-btn-inner) {
  position: relative;
  transition: color 0.2s ease;
}
.menu .menu-item a:not(.inline-flex):not(.know-btn-inner)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #FF594B;
  transition: width 0.25s ease;
  border-radius: 2px;
}
.menu .menu-item a:not(.inline-flex):not(.know-btn-inner):hover::after {
  width: 100%;
}
.menu .menu-item a:not(.inline-flex):not(.know-btn-inner):hover {
  color: #1a3a5c;
}

/* How We Work — connecting arrow between steps on desktop */
@media (min-width: 1024px) {
  .how-step-connector {
    position: relative;
  }
  .how-step-connector::after {
    content: '→';
    position: absolute;
    top: 28px;
    right: -22px;
    font-size: 1.5rem;
    color: #19c6b7;
    z-index: 10;
    font-weight: 700;
  }
}

/* Hero scroll indicator bounce */
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.hero-scroll-indicator {
  animation: bounce-slow 2s ease-in-out infinite;
}

/* Scroll to top button */
#scroll-top-btn {
  position: fixed;
  bottom: 105px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: #1a3a5c;
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 18px rgba(26, 58, 92, 0.35);
}
#scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#scroll-top-btn:hover {
  background: #FF594B;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 89, 75, 0.45);
}

/* Trust bar emoji icons — prevent layout shift */
.trust-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* Image lazy loading fade-in */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

/* ============================================================
   GLOBAL TYPOGRAPHY SYSTEM
   Establishes a consistent type scale site-wide
   ============================================================ */

/* CSS Custom Properties — Design Tokens */
:root {
  --color-primary:   #1a3a5c;
  --color-accent:    #19c6b7;
  --color-cta:       #FF594B;
  --color-text:      #374151;
  --color-muted:     #6B7280;
  --color-light:     #9CA3AF;

  /* Type scale — fluid with clamp() */
  --text-xs:   clamp(0.7rem,  1.5vw, 0.75rem);
  --text-sm:   clamp(0.8rem,  1.8vw, 0.875rem);
  --text-base: clamp(0.9rem,  2vw,   1rem);
  --text-lg:   clamp(1rem,    2.2vw, 1.125rem);
  --text-xl:   clamp(1.1rem,  2.5vw, 1.25rem);
  --text-2xl:  clamp(1.25rem, 3vw,   1.5rem);
  --text-3xl:  clamp(1.5rem,  3.5vw, 1.875rem);
  --text-4xl:  clamp(1.75rem, 4vw,   2.25rem);
  --text-5xl:  clamp(2rem,    5vw,   3rem);
  --text-hero: clamp(2rem,    7vw,   4.5rem);

  /* Line heights */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
  --tracking-widest: 0.1em;
}

/* Base body typography */
body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Paragraphs — consistent line height everywhere */
p {
  line-height: var(--leading-relaxed);
}

/* Headings scale — sizing only, let color inherit or be driven by utility classes */
h1 { font-size: var(--text-5xl);  line-height: var(--leading-tight);  font-weight: 700; }
h2 { font-size: var(--text-4xl);  line-height: var(--leading-tight);  font-weight: 700; }
h3 { font-size: var(--text-2xl);  line-height: var(--leading-snug);   font-weight: 600; }
h4 { font-size: var(--text-xl);   line-height: var(--leading-snug);   font-weight: 600; }
h5 { font-size: var(--text-lg);   line-height: var(--leading-normal); font-weight: 600; }
h6 { font-size: var(--text-base); line-height: var(--leading-normal); font-weight: 600; }

/* When on light backgrounds without explicit text color, use standard colors */
body:not(.dark) h1:not([class*="text-"]):not([class*="text-white"]),
body:not(.dark) h2:not([class*="text-"]):not([class*="text-white"]),
body:not(.dark) h3:not([class*="text-"]):not([class*="text-white"]),
body:not(.dark) h4:not([class*="text-"]):not([class*="text-white"]) {
  color: var(--color-primary);
}

body:not(.dark) p:not([class*="text-"]):not([class*="text-white"]) {
  color: var(--color-text);
}

/* Section eyebrow labels — consistent small caps style */
.section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-cta);
}

/* Section underline accent bar — reusable */
.section-underline {
  width: 3.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--color-cta);
  margin: 0.75rem auto 1rem;
}

/* Footer typography improvements */
.footer-link-list a {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  transition: color 0.2s ease;
}

.footer-contact-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.footer-heading {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Mobile — improve hero text legibility */
@media (max-width: 480px) {
  .hbmt, #text1, #text2 {
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
    line-height: 1.2 !important;
  }
  .hbp {
    font-size: 0.85rem !important;
    margin-top: 2.5rem !important;
    line-height: 1.6 !important;
  }
  .explore-btn-inner {
    font-size: 0.75rem !important;
    padding: 0.55rem 1.25rem !important;
  }
}

/* Tablet — fine-tune intermediate breakpoint */
@media (min-width: 481px) and (max-width: 767px) {
  .hbmt, #text1, #text2 {
    font-size: clamp(2rem, 7vw, 2.6rem) !important;
    line-height: 1.2 !important;
  }
}

/* Fix clients section on mobile — override any conflicting styles */
@media (max-width: 639px) {
  .clients-text-div {
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: center !important;
  }
  .carousel {
    width: 100% !important;
  }
  section.clients {
    padding-block: 12px 4px;
  }
}

/* Improve about section body text on mobile */
@media (max-width: 767px) {
  .about-r-t {
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
    line-height: 1.3 !important;
    text-align: center;
  }
  .about-r-d {
    font-size: 0.9rem !important;
    line-height: 1.65 !important;
  }
  .about-r-mt {
    font-size: 0.8rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* Services section — fix big text on small screens */
@media (max-width: 639px) {
  .services-title2 {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
    line-height: 1.25 !important;
  }
  .service-title {
    font-size: 0.7rem !important;
    letter-spacing: 0.12em;
  }
}

/* WCU slider headings — responsive */
@media (max-width: 639px) {
  .wcu-slides h3 {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
  }
  .wcu-slides p {
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
  }
}

/* Industries grid card text — keep readable on mobile */
@media (max-width: 639px) {
  .grid h3 {
    font-size: 1rem !important;
  }
  .grid p {
    font-size: 0.825rem !important;
    line-height: 1.6 !important;
  }
}

/* FAQ accordion text — comfortable reading */
.faq-question-text,
[class*="faq"] span,
[class*="faq"] p {
  line-height: var(--leading-relaxed);
}

/* Gallery section heading */
.gallery-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-primary);
  line-height: var(--leading-tight);
}

/* Contact banner heading */
.contact-banner h2 {
  font-size: clamp(1.4rem, 4vw, 2.25rem);
  line-height: var(--leading-tight);
}

/* General button typography */
a.inline-flex, button.inline-flex {
  letter-spacing: var(--tracking-wide);
}

/* Footer copyright */
.f-2 {
  font-size: var(--text-xs) !important;
  letter-spacing: 0.01em;
  color: var(--color-muted);
}

/* Improve line heights on stat counters */
.counter-text {
  line-height: 1.3 !important;
  font-size: clamp(0.65rem, 1.5vw, 0.8rem) !important;
}

/* Trust bar — consistent text */
@media (max-width: 639px) {
  .trust-bar-label {
    font-size: 0.75rem;
  }
  .trust-bar-sub {
    font-size: 0.65rem;
  }
}

/* ============================================================
   SERVICE / PRODUCT CARDS — MOBILE TAP FIX
   The 3D flip effect only works on desktop (hover).
   On touch screens (no hover), we show a clean static card
   with a tap indicator instead of the broken flip.
   ============================================================ */

/* On touch devices — disable the 3D flip entirely */
@media (hover: none) {
/* ============================================================
   SERVICE / PRODUCT CARDS — CLEAN RESPONSIVE MOBILE STYLES
   ============================================================ */

/* Mobile & Tablet (< 1024px) */
@media (max-width: 1023px) {
  /* Keep the card container fully visible, fixed height */
  a.group {
    display: flex !important;
    width: 100% !important;
  }

  a.group > div {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 250px !important;
    transform: none !important;
    transform-style: flat !important;
  }

  /* Front face image is always fully visible filling the card */
  a.group > div > div:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  a.group img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  /* Card title banner at bottom */
  a.group > div > div:nth-child(3) {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    padding: 2.5rem 0.5rem 0.75rem !important;
    transform: none !important;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 65%, transparent 100%) !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
    z-index: 10;
  }

  a.group p.font-dmserif {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  }

  /* Hide back face on touch devices so no flip confusion */
  a.group > div > div:last-child {
    display: none !important;
  }
}

@media (max-width: 640px) {
  a.group > div {
    height: 210px !important;
  }
  a.group p.font-dmserif {
    font-size: 0.82rem !important;
  }
}

/* ============================================================
   GLOBAL PAGE HERO / BREADCRUMB BANNER — TEXT VISIBILITY FIX
   All sub-service pages use the same pattern:
   bg-gray-900 > bg-image opacity-30 + bg-black/30 overlay.
   The combined effect is NOT dark enough for white text.
   These rules ensure ALL page heroes have readable text.
   ============================================================ */

/* Force all page hero headings to be white with text shadow */
.breadcrumb-content h1,
.breadcrumb-content h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Force all page hero paragraphs to be bright white */
.breadcrumb-content p {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Force breadcrumb nav text to be white */
.breadcrumb-content div,
.breadcrumb-content a,
.breadcrumb-content span {
  color: rgba(255, 255, 255, 0.8) !important;
}
.breadcrumb-content a:hover {
  color: #ffffff !important;
}
.breadcrumb-content span[class*="text-white"] {
  color: #ffffff !important;
}

/* Ensure the hero overlay is always dark enough (bg-black/30 is too light) */
section.relative.bg-gray-900 > div.absolute.inset-0.bg-black\/30,
section.relative.bg-gray-900 div[class*="bg-black"] {
  background-color: rgba(0, 0, 0, 0.65) !important;
}

/* Global heading color override for headings on colored/dark backgrounds */
section.bg-gray-900 h1,
section.bg-gray-900 h2,
section.bg-gray-900 h3,
section[class*="bg-[#1a3a5c]"] h1,
section[class*="bg-[#1a3a5c]"] h2,
section[class*="bg-gradient"] h1,
section[class*="bg-gradient"] h2 {
  color: #ffffff !important;
}

section.bg-gray-900 p,
section[class*="bg-[#1a3a5c]"] p {
  color: rgba(255, 255, 255, 0.92) !important;
}

section.bg-gray-900 .breadcrumb-content h1,
section.bg-gray-900 .breadcrumb-content p,
section.bg-gray-900 .breadcrumb-content span,
section.bg-gray-900 .breadcrumb-content a {
  color: #ffffff !important;
}