/* ============================================= */
/* GLOBAL & TYPOGRAPHY */
/* ============================================= */
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  @apply antialiased bg-white text-gray-900;
  margin: 0;
  overflow-x: hidden;
}

/* ============================================= */
/* HERO SECTION */
/* ============================================= */
#home {
  min-height: 100vh;
  /* Remove background-color since you're using inline gradient */
}

.hero-title {
  @apply text-5xl sm:text-6xl lg:text-7xl font-extrabold leading-tight tracking-tight;
}

.hero-subtitle {
  @apply text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight;
}

.hero-tagline {
  @apply text-xl text-gray-700 font-medium leading-relaxed max-w-md;
}

.hero-ctas {
  @apply flex flex-col sm:flex-row gap-4 pt-5;
}

.hero-visual {
  @apply transition-all duration-600 ease-out;
}

.hero-visual:hover {
  @apply translate-y-[-8px] scale-[1.02];
}

/* No frame on logo – pure image */
.hero-center-logo {
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.08));
}

/* Orbit container & items – closer & smaller */
.hero-orbit-container {
  position: relative;
  transform: translateY(-5%); /* slight upward offset for centering */
}

.hero-orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  will-change: transform;
  z-index: 10; /* behind logo (z-20) */
}

.hero-orbit-item > div {
  @apply rounded-full bg-white/95 shadow-md flex items-center justify-center border border-red-200/40 overflow-hidden transition-all duration-400;
  width: 80px;
  height: 80px;
}

.hero-orbit-item > div img {
  width: 52px;
  height: 52px;
}

.hero-orbit-item:hover > div {
  @apply scale-110 shadow-xl border-red-300/60;
}

/* ============================================= */
/* SCROLL ANIMATIONS */
/* ============================================= */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animate-fadeIn {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================= */
/* OTHER UTILITIES & HOVERS */
/* ============================================= */
.hover-effect {
  transition: all 0.3s ease;
}

.hover-effect:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.industry-icon {
  transition: all 0.3s ease;
}

.bg-gradient-radial {
  background-image: radial-gradient(circle at 30% 20%, var(--tw-gradient-stops));
}

.perspective-1600 {
  perspective: 1600px;
}

body {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* Update in style.css */
body {
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* rest of your styles */
}

/* Or for a more modern look */
body {
  font-family: 'Montserrat', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Add to your style.css for better typography control */
.hero-title {
  @apply text-5xl sm:text-6xl lg:text-7xl font-black text-gray-900;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-family: 'Montserrat', 'Inter', sans-serif;
}

.hero-subtitle {
  @apply text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-800;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  font-family: 'Montserrat', 'Inter', sans-serif;
}

.hero-tagline {
  @apply text-xl text-gray-700 font-medium;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important;
  font-family: 'Inter', sans-serif;
}
/* Add to style.css for Mohaa's picture styling */
.portrait-container {
  position: relative;
}

.portrait-container::before {
  content: '';
  position: absolute;
  inset: -8px;
  background: linear-gradient(45deg, #ef4444 0%, #3b82f6 50%, #10b981 100%);
  border-radius: 2rem;
  z-index: -1;
  opacity: 0.15;
  filter: blur(15px);
  animation: gentlePulse 4s ease-in-out infinite alternate;
}

@keyframes gentlePulse {
  0% {
    opacity: 0.1;
    transform: scale(0.98);
  }
  100% {
    opacity: 0.2;
    transform: scale(1.02);
  }
}

/* Portrait hover effects */
.group:hover img {
  transform: scale(1.05);
}

.group:hover .floating-element {
  transform: translateY(-5px);
}

/* Make sure portrait maintains aspect ratio */
.portrait-container img {
  width: 100%;
  height: auto;
  border-radius: 1.5rem;
  object-fit: cover;
  object-position: center;
}
/* ============================================= */
/* OUR BEGINNING — Inner Red Layer (Apple Transition) */
/* ============================================= */
.our-beginning {
  background: #dc2626;
  color: white;
}


.portrait-container img {
  transition: transform 0.7s ease-out;
}

.portrait-container:hover img {
  transform: scale(1.05);
}

/* Make sure text card stretches */
.grid > div:first-child {
  display: flex;
  flex-direction: column;
}

.grid > div:first-child > div:first-child {
  flex: 1;
}
/* Sunrise animation for the image card in Our Beginning section */

/* Wrapper for positioning */
.sunrise-image-wrapper {
  position: relative;
}

/* The image card container */
.sunrise-image-card {
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(0.94);
  transition:
    transform 1.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.8s ease-out;
  will-change: transform, opacity;
}

/* Visible state – sunrise rise + gentle pop */
.sunrise-image-card.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Optional: subtle glow/sunrise halo effect on load */
.sunrise-image-card.visible::after {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at 50% 30%, rgba(239, 68, 68, 0.18), transparent 60%);
  opacity: 0;
  animation: sunrise-glow 3s ease-out forwards;
  pointer-events: none;
  z-index: -1;
}

@keyframes sunrise-glow {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 0.6; transform: scale(1.1); }
  100% { opacity: 0.3; transform: scale(1); }
}

/* Hover lift (unchanged) */
.sunrise-image-card:hover {
  transform: translate3d(0, -8px, 0) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  transition: all 0.5s ease;
}

/* Image inside – subtle scale on hover */
.sunrise-image {
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sunrise-image-card:hover .sunrise-image {
  transform: scale(1.04);
}

/* ===============================
   THE PRESENT – FULLY RESPONSIVE CARD SYSTEM + STAGGERED ANIMATION + CLICKABLE GLOW
================================ */

/* Base card styles */
.present-card {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 1.5rem;
  padding: 4.5rem 2.5rem 2.5rem 2.5rem;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(60px) scale(0.94);
  transition:
    transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.7s ease,
    box-shadow 0.5s ease;
  will-change: transform, opacity, box-shadow;
  cursor: pointer; /* Signals clickability */
  /* Removed overflow: hidden – no longer needed */
}

/* Visible state – rise + gentle pop */
.present-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered delays – left first, center second, right last */
.present-card-left {
  transition-delay: 0s;
}

.present-card-center {
  transition-delay: 200ms;
}

.present-card-right {
  transition-delay: 400ms;
}

/* Red/pinkish glow on hover – now on a separate pseudo-element */
.present-card::before {
  content: '';
  position: absolute;
  inset: -20px; /* Slightly larger area for smooth glow fade */
  background: radial-gradient(
    circle at center,
    rgba(239, 68, 68, 0.28) 0%,   /* Stronger red-pink center */
    rgba(239, 68, 68, 0.15) 40%,  /* Softer edge */
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: -1; /* Behind icon */
  border-radius: 2rem; /* Slightly softer corners */
}

/* Glow appears on hover */
.present-card:hover::before {
  opacity: 1;
}

/* Hover lift + shadow */
.present-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 35px 70px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Floating icon – ensure it stays above glow */
.present-icon {
  position: absolute;
  top: -32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 10px 25px rgba(239, 68, 68, 0.5);
  z-index: 10; /* Above glow (::before is z-index -1) */
  transition: transform 0.3s ease;
}

.present-card:hover .present-icon {
  transform: scale(1.1);
}

.present-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 2;
}

.present-card h3 {
  margin-top: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.present-card p {
  margin-top: 0.5rem;
  color: #4b5563;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Style for "And many more..." line */
.service-card p.text-red-600.font-medium.text-center.mt-4.text-sm.italic {
  margin-top: 1.25rem;
  font-style: italic;
  border-top: 1px dashed rgba(239, 68, 68, 0.3);
  padding-top: 0.75rem;
}
/* ===============================
   MOBILE OPTIMIZATION
================================ */
@media (max-width: 640px) {

  /* Swap background for vertical image */
  .present-section {
    background-image: url('images/testimonials/mohanight.jpeg') !important;
    background-size: cover;
    background-position: center;
  }

  /* Icon adjustments */
  .present-icon {
    position: static;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .present-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Card padding */
  .present-card {
    padding: 3rem 1.5rem 2rem 1.5rem;
    margin-bottom: 1.5rem;
  }

  /* Text size adjustments */
  .present-card h3 {
    font-size: 1.1rem;
    margin-top: 0;
  }

  .present-card p {
    font-size: 0.9rem;
  }

  /* Grid spacing */
  .grid {
    gap: 2.5rem;
  }
}

/* ===============================
   GENERAL SAFETY & IMAGE
================================ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Disable hover on touch devices */
@media (hover: none) {
  .present-card:hover {
    transform: none;
  }
}

/* ===============================
   MOBILE OVERFLOW SAFETY FIXES
   (Desktop untouched)
================================ */

/* Prevent invisible horizontal expansion */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Contain heavy shadows on mobile */
@media (max-width: 640px) {
  .present-card {
    max-width: 100%;
    overflow: hidden;
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
}

/* Reduce floating icon overflow on mobile */
@media (max-width: 640px) {
  .present-icon {
    width: 56px;
    height: 56px;
    top: -20px;
    box-shadow: 0 6px 14px rgba(239, 68, 68, 0.45);
  }
}

/* Disable hover transforms on touch devices */
@media (hover: none) {
  .present-card:hover {
    transform: none;
  }
}

/* Image safety */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ===============================
   MOBILE CARD CLIPPING FIX
   (Desktop untouched)
================================ */

@media (max-width: 640px) {
  .mobile-card-clip {
    overflow: hidden;       /* clips shadows / content inside the frame */
    border-radius: inherit; /* matches the parent frame */
  }
}

/* ===============================
   THE FUTURE SECTION IMAGE FIX – MOBILE
================================ */
@media (max-width: 1024px) {
  /* Stack the grid vertically */
  #the-future .grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  /* Image container responsive */
  .future-image-container .relative img {
    width: 100%;
    height: auto;      /* let image keep natural aspect ratio */
    max-height: 500px; /* optional: prevents very tall images */
    object-fit: cover;
  }

  /* Move caption below image on mobile */
  .future-image-container .caption-overlay {
    position: relative;  /* no more absolute */
    bottom: auto;
    inset: auto;
    background: white;   /* remove transparency for clarity */
    border: none;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
  }
}
.text-red-900 {
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* Future image card – gentle sunrise rise + pop */
.future-image-card {
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(0.96);
  transition:
    transform 1.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.9s ease-out;
  will-change: transform, opacity;
}

.future-image-card.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Subtle sunrise glow behind the image on reveal */
.future-image-card.visible::after {
  content: '';
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle at 50% 30%, rgba(239, 68, 68, 0.25), transparent 70%);
  opacity: 0;
  animation: sunrise-glow 4s ease-out forwards;
  pointer-events: none;
  z-index: -1;
}

@keyframes sunrise-glow {
  0%   { opacity: 0; transform: scale(0.7); }
  50%  { opacity: 0.7; transform: scale(1.15); }
  100% { opacity: 0.35; transform: scale(1); }
}

/* Image inside – subtle zoom on hover */
.future-image {
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.future-image-card:hover .future-image {
  transform: scale(1.04);
}

/* Hover lift for the whole card */
.future-image-card:hover {
  transform: translate3d(0, -10px, 0) scale(1.02);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
}
/* View Our Team button – red glow on hover (cursor-aware) */
.red-glow-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s ease, box-shadow 0.4s ease, background-color 0.3s ease;
}

.red-glow-btn::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(239, 68, 68, 0.45),
    rgba(239, 68, 68, 0.25),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
}

.red-glow-btn:hover::before {
  opacity: 1;
}

.red-glow-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 25px 60px rgba(239, 68, 68, 0.4);
}
/* ===============================
   TESTIMONIAL – FINAL LOCKED MOTION
================================ *//* Base hidden state (ALL cards) */
.testimonial-card {
  opacity: 0;
  transform: translate3d(0, 70px, 0) scale(0.93);
  transition:
    transform 1.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.45s ease;
  will-change: transform, opacity;
}/* Visible state */
.testimonial-card.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}/* Center card – appears FIRST */
.testimonial-card.is-center {
  transition-delay: 0s;
  transition-duration: 1.05s;
}/* Side cards – follow slightly */
.testimonial-card.is-side {
  transition-delay: 0.18s;
  transition-duration: 1.2s;
}/* Hover – visual only (never corrective) */
.testimonial-card:hover {
  transform: translate3d(0, -8px, 0) scale(1.02);
  box-shadow: 0 20px 50px rgba(239, 68, 68, 0.18);
}

/* ===============================
   PARTNERS LOGOS STRIP – LEFT-TO-RIGHT SLIDE + GENTLE FALL-IN
================================ */

/* The white strip container */
.partners-strip {
  opacity: 0;
  transform: translate3d(-80%, 40px, 0) scale(0.96);
  min-height: 120px; /* ← add this temporarily to make it easier to see when it's hidden */
  transition:
    transform 1.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 1.1s ease-out;
  will-change: transform, opacity;
}

/* Visible state – slide in from left + gentle fall/pop */
.partners-strip.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Individual logos – subtle fade-in stagger from left to right */
.logos-grid img {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.logos-grid img.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger logos one by one (left to right) */
.logos-grid img:nth-child(1) { transition-delay: 0.1s; }
.logos-grid img:nth-child(2) { transition-delay: 0.18s; }
.logos-grid img:nth-child(3) { transition-delay: 0.26s; }
.logos-grid img:nth-child(4) { transition-delay: 0.34s; }
.logos-grid img:nth-child(5) { transition-delay: 0.42s; }
.logos-grid img:nth-child(6) { transition-delay: 0.50s; }
.logos-grid img:nth-child(7) { transition-delay: 0.58s; }

/* Hover on logos (unchanged) */
.logos-grid img:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* ===============================
   KARIBU – GENTLE RISE + POP FOR TEXT & MAP
================================ */

/* Left: Welcome text block */
.karibu-left {
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(0.96);
  transition:
    transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.8s ease-out;
  will-change: transform, opacity;
}

/* Right: Map card */
.karibu-right {
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(0.96);
  transition:
    transform 1.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.85s ease-out;
  will-change: transform, opacity;
}

/* Visible state – gentle rise + pop */
.karibu-left.visible,
.karibu-right.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger: left first, right follows */
.karibu-left {
  transition-delay: 0s;
}

.karibu-right {
  transition-delay: 180ms; /* ~0.18s delay – right appears after left */
}

/* Hover lift (consistent with your style) */
.karibu-left:hover,
.karibu-right:hover {
  transform: translate3d(0, -10px, 0) scale(1.02);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
  transition: all 0.5s ease;
}

.team-card--small-photo .team-photo-bg {
  width: 80px;
  height: 80px;
}

.team-card--small-photo .team-photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.team-card--small-photo .team-photo-bg {
  background: #fff;
  border-radius: 9999px;
}