/* Site-wide custom CSS (extends Tailwind CDN). */

html { scroll-behavior: smooth; }

/* Slight polish */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* --- Mobile overflow guard ---
   Prevent any single overflowing element (marquee, wide image, iframe, absolute-positioned
   decoration) from causing the entire page to scroll horizontally on phones. Uses `clip`
   instead of `hidden` because `overflow: hidden` on an ancestor breaks `position: sticky`
   on descendants — `clip` does not, so the sticky header still works. */
html, body { max-width: 100%; overflow-x: clip; }
img, video, iframe { max-width: 100%; height: auto; }
iframe { height: revert; } /* keep explicit iframe heights (Google Maps, flipbook, etc.) */

/* Make sure long unbroken strings (URLs, long emails) wrap on mobile instead of overflowing */
@media (max-width: 640px) {
  p, li, h1, h2, h3, h4, span, a { overflow-wrap: anywhere; word-break: break-word; }
}

/* Fade-in on scroll — default visible so no-JS + headless capture works,
   animate transform only when JS marks .fade-in-armed. */
.fade-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
.fade-in-armed.fade-in { opacity: 0; transform: translateY(16px); }
.fade-in-armed.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Hero carousel */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide.active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
}

/* Marquee (recruiters/placements) */
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Testimonials — cards */
.testimonial-card { transition: transform .3s ease, box-shadow .3s ease; }
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.15); }

/* Floating action buttons (React-matched: white bg + red icon for call/loc, green for WA, red circle for Apply Now) */
.fab-btn {
  width: 52px; height: 52px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.fab-btn:hover { transform: translateY(-2px) scale(1.05); }
.fab-call { background: #fff; color: #dc2626; }
.fab-wa   { background: #25D366; color: #fff; }
.fab-loc  { background: #fff; color: #dc2626; }
.fab-apply {
  background: #dc2626;
  color: #fff;
  font-weight: 700; letter-spacing: .02em; font-size: 11px;
  text-align: center; line-height: 1.1;
}

/* Section titles */
.section-title { position: relative; display: inline-block; }
.section-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 3px; background: linear-gradient(90deg, #dc2626, transparent);
  border-radius: 2px;
}
.section-title.centered::after { left: 20%; right: 20%; }

/* Hide scrollbar on horizontal marquees */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }