/* =========================================================
   Top Lines — Polish layer
   Tablet/responsive fixes + subtle modern micro-animations.
   Loaded AFTER responsive-fix.css, so values here win.
   ========================================================= */

/* ---------- Global typography refinement ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p { hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; }
.section-title,
.section-title.title-2,
h1, h2, h3, h4, h5 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Never let inline <br> force overflow on narrow screens. */
@media (max-width: 991px) {
  .section-title br,
  .section-heading p br,
  .about-content-left p br,
  .process-desc p br,
  .slider-content .section-title br,
  .bottom-content .antra-desc p br { display: none; }
}

/* ---------- Fluid headings ---------- */
.section-title,
.section-title.title-2 {
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.slider-content-wrap .section-heading .section-title {
  font-size: clamp(34px, 6vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.sub-heading {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- Tablet (768 – 1199) layout fixes ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .container,
  .container-2 {
    padding-left: 28px !important;
    padding-right: 28px !important;
    max-width: 100% !important;
  }

  /* Section-heading split (sub | title) → stack on tablet for breathing room */
  .section-heading-wrap > .col-lg-4,
  .section-heading-wrap > .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .section-heading-wrap > .col-lg-4 .section-heading { margin-bottom: 18px; }

  /* Two-column rows (about / award / testimonial / feature) → stack */
  .about-wrap-2 > .col-lg-8,
  .about-wrap-2 > .col-lg-4,
  .award-wrap > .col-lg-5,
  .award-wrap > .col-lg-7,
  .feature-section .row > .col-lg-6,
  .testimonial-section .row > .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .about-content-left,
  .about-content-right { margin-bottom: 32px; }

  /* Process grid → 2 per row on tablet */
  .process-wrap > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Section vertical rhythm shrunk on tablet */
  .pt-150 { padding-top: 90px !important; }
  .pb-150 { padding-bottom: 90px !important; }
  .pt-130 { padding-top: 80px !important; }
  .pb-130 { padding-bottom: 80px !important; }
  .pt-110 { padding-top: 70px !important; }
  .pb-110 { padding-bottom: 70px !important; }

  /* Page header text fits */
  .page-header .page-header-content .title {
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.1;
  }

  /* Hero subtitle + button row stays centered */
  .slider-content-wrap .bottom-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
  }

  /* Service swiper card text breathing room */
  .service-swiper .swiper-slide h5 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  /* Award item row layout */
  .award-item {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .award-item .left-content { flex: 1 1 100%; }

  /* History carousel cards */
  .history-item .title { font-size: 28px; }
}

/* ---------- Small tablet / large mobile (576-767) ---------- */
@media (max-width: 767px) {
  .container,
  .container-2 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .section-heading-wrap > [class*="col-"] { margin-bottom: 12px; }

  .process-wrap > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .page-header { padding: 90px 0 70px; }
  .page-header .page-header-content .title {
    font-size: clamp(32px, 8vw, 48px);
  }
  .page-header .page-header-content .sub-title { font-size: 14px; }

  .award-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .testi-top-content .row > [class*="col-"] {
    margin-bottom: 14px;
  }

  .feature-item-list .feature-item .title { font-size: 20px; }
}

/* Prevent any image/video from forcing horizontal scroll */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}
.row { margin-left: 0; margin-right: 0; }
[class*="col-"] { min-width: 0; }

/* =========================================================
   Subtle modern micro-animations
   ========================================================= */
@keyframes tlFadeUp {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes tlFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-top,
.fade-wrapper .section-heading,
.fade-wrapper .feature-item,
.fade-wrapper .process-item,
.fade-wrapper .counter-item {
  animation: tlFadeUp 0.9s cubic-bezier(.22,.61,.36,1) both;
}

/* Card / link hover polish — applied broadly but lightly */
.feature-item,
.process-item,
.history-item,
.award-item,
.counter-item,
.service-swiper .swiper-slide > div,
.about-img-1 img,
.testi-img img,
.feature-img {
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.45s cubic-bezier(.22,.61,.36,1),
              border-color 0.3s ease;
  will-change: transform;
}

.feature-item:hover,
.process-item:hover,
.history-item:hover,
.counter-item:hover,
.service-swiper .swiper-slide:hover > div {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.25);
}

.about-img-1:hover img,
.testi-img:hover img,
.feature-img:hover img {
  transform: scale(1.03);
}
.about-img-1, .testi-img, .feature-img { overflow: hidden; border-radius: 12px; }
.about-img-1 img, .testi-img img, .feature-img img {
  transition: transform 0.8s cubic-bezier(.22,.61,.36,1);
}

/* Primary button — refined press + glow */
.tl-primary-btn {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.tl-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(20, 184, 166, 0.55);
}
.tl-primary-btn:active { transform: translateY(0); }
.tl-primary-btn .icon {
  transition: transform 0.3s ease;
}
.tl-primary-btn:hover .icon { transform: translateX(4px); }

/* Nav links: underline grow */
.mobile-menu-items ul li a {
  position: relative;
  transition: color 0.25s ease;
}
.mobile-menu-items ul li a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
}
.mobile-menu-items ul li a:hover::after,
.mobile-menu-items ul li a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Section heading sub-heading reveal */
.section-heading .sub-heading {
  display: inline-block;
  position: relative;
  padding-left: 38px;
}
.section-heading .sub-heading::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 28px; height: 2px;
  background: currentColor;
  opacity: 0.65;
  transform: translateY(-1px);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
