/*
 * SAI PAVAN - CUSTOM STYLESHEET V2
 * (Contains the v2.6 inline heading fix)
 */

/* Add Tailwind base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* SOLID FIX V2.5: 
  Removed the responsive heading classes from here.
  They are now applied DIRECTLY in the PHP files
  to bypass any and all CSS caching issues.
*/
@layer components {

  /* --- Other Components (from previous fixes) --- */

  /* Buttons */
  .btn-primary {
    @apply bg-blue-600 text-white font-semibold px-5 py-2.5 rounded-lg shadow-sm hover:bg-blue-700 transition-colors duration-300;
  }
  .btn-primary-hero {
    @apply bg-white text-blue-700 font-bold text-lg px-8 py-3 rounded-lg shadow-lg hover:bg-gray-100 transform hover:scale-105 transition-all duration-300;
  }

  /* Forms */
  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors;
  }
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  /* Footer Links */
  .footer-link {
    @apply text-gray-400 hover:text-white transition-colors;
  }
  
  /* Highlight Card (Homepage) */
  .highlight-card {
    @apply bg-white p-6 rounded-xl shadow-lg border border-gray-100 text-center transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group;
  }
  
  /* Testimonial Card (Homepage) */
  .testimonial-card-new {
    @apply bg-white p-6 rounded-lg shadow-lg border border-gray-100 relative;
  }
}

/* Custom Body Font */
body {
  font-family: 'Inter', sans-serif;
}

/* --- Hero Slider Styles --- */
#hero-slider {
  position: relative;
  width: 100%;
  /* Full-screen mobile fix: 100% of visible height minus 5rem (80px) header */
  min-height: calc(100svh - 5rem);
  /* Desktop height */
  md:min-height: 70vh;
  lg:min-height: 80vh;
  overflow: hidden;
  background-color: #003366; /* Fallback color */
}
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}
.slide.active {
  opacity: 1;
  z-index: 2;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ken Burns Effect */
  transform: scale(1.15);
  transition: transform 8s ease-out;
}
.slide.active img {
  transform: scale(1);
}

.slide-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 3;
  padding: 1rem;
  /* Dark overlay for readability */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
}
#slider-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
  z-index: 4;
}
.dot {
  width: 0.75rem;
  height: 0.75rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.dot.active {
  background-color: white;
}


/* --- Logo Slider (Global) --- */
.logo-slider-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 6rem; /* 96px */
}
.logo-slider-container::before,
.logo-slider-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem; /* 64px */
  z-index: 2;
}
.logo-slider-container::before {
  left: 0;
  background: linear-gradient(to right, rgb(249 250 251 / 1), rgb(249 250 251 / 0));
}
.logo-slider-container::after {
  right: 0;
  background: linear-gradient(to left, rgb(249 250 251 / 1), rgb(249 250 251 / 0));
}
/* For sliders on white background */
.logo-slider-container.on-white::before {
  background: linear-gradient(to right, rgb(255 255 255 / 1), rgb(255 255 255 / 0));
}
.logo-slider-container.on-white::after {
  background: linear-gradient(to left, rgb(255 255 255 / 1), rgb(255 255 255 / 0));
}

.logo-slider-track {
  display: flex;
  align-items: center;
  height: 100%;
  /* This is the magic: forces one line */
  flex-wrap: nowrap;
  width: max-content; 
  animation: scroll-x 180s linear infinite;
}
.logo-slide {
  height: 100%;
  padding-left: 2rem;  /* 32px */
  padding-right: 2rem; /* 32px */
  /* This is the magic: stops logos from shrinking */
  flex-shrink: 0; 
}
.logo-slide img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}