/* 
========================================================================
   NEELKANTH MICROTECH - Home Page Stylesheet
   Website: Neelkanth Microtech (Precision Manufacturing & Microtech)
   Hosting-ready static stylesheet
========================================================================
*/

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

/* Color theme and layout custom properties */
:root {
  --primary-color: #0057D9;
  --secondary-color: #003B95;
  --accent-color: #E5E7EB;
  --dark-color: #0F172A;
  --text-color: #475569;
  --light-bg: #FFFFFF;
  --gray-bg: #F8FAFC;
  --border-color: #E2E8F0;
  
  --font-main: 'Poppins', sans-serif;
  --font-sans: 'Poppins', sans-serif;
  --font-display: 'Poppins', sans-serif;
}

/* Custom Base resets */
html {
  scroll-behavior: smooth;
  font-family: var(--font-main);
  color: var(--text-color);
  background-color: var(--light-bg);
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-main);
}

button,
input,
textarea,
select {
  font-family: var(--font-main);
}

/* Custom container utilities to match max bounds */
.container-custom {
  width: 100%;
  max-width: 80rem; /* 1280px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .container-custom {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .container-custom {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* 
========================================================================
   MARQUEE/LOGO SLIDER FOR TRUSTED CLIENTS
========================================================================
*/
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee-static {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.animate-marquee-static:hover {
  animation-play-state: paused;
}

/* 
========================================================================
   STICKY HEADER STYLING
========================================================================
*/
.header-sticky-shadow {
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
  border-color: rgba(226, 232, 240, 0.8);
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* 
========================================================================
   HERO SLIDER ANIMATION & IMAGES
========================================================================
*/
.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
  transform: translateY(10px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  position: relative;
}

/* Slide indicators active visual */
.hero-indicator.active {
  width: 2rem;
  background-color: var(--primary-color) !important;
}

/* Hero Carousel Slide Images */
.carousel-image {
  opacity: 0;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  transform: scale(1.05);
}

.carousel-image.active {
  opacity: 1;
  transform: scale(1);
}

/* 
========================================================================
   ACCORDION ANIMATIONS (FAQ Desk)
========================================================================
*/
.faq-answer-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease-out;
}

.faq-card.open {
  border-color: var(--primary-color) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 87, 217, 0.05), 0 4px 6px -4px rgba(0, 87, 217, 0.05) !important;
}

.faq-card.open .faq-answer-container {
  max-height: 250px; /* Secure limit for descriptive texts */
}

.faq-card.open .accordion-icon {
  transform: rotate(180deg);
  background-color: rgba(0, 87, 217, 0.1);
  color: var(--primary-color);
}

/* 
========================================================================
   MODAL DIALOGS (Request Quote & Services Details)
========================================================================
*/
.modal-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.open .modal-container {
  transform: scale(1) translateY(0);
}

/* Custom interactive scrollbars */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 
========================================================================
   MICRO TRANSLATIONS & ACTIONS
========================================================================
*/


/* Toast animation */
@keyframes slide-in-up {
  0% { transform: translateY(100%) translateX(-50%); opacity: 0; }
  100% { transform: translateY(0) translateX(-50%); opacity: 1; }
}

.toast-message {
  animation: slide-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom shadow & transitions for industrial sections */
.shadow-premium-sm {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.shadow-premium {
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.04), 0 8px 15px -6px rgba(15, 23, 42, 0.04);
}

/* Client Logo Styling */
.client-logo-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.client-logo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 87, 217, 0.3);
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.05);
}

/* Custom Image Frame Card lift effect */
.image-card-lift {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.image-card-lift:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08);
}

/* Premium Image Zoom & Hover effects */
.zoom-img-container {
  overflow: hidden;
  position: relative;
}
.zoom-img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.zoom-img-container:hover .zoom-img {
  transform: scale(1.06);
}

/* Icons and elements subtle animations */
.icon-bounce {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease, color 0.3s ease;
}
.group:hover .icon-bounce,
.group\/sector:hover .icon-bounce,
.group\/val:hover .icon-bounce {
  transform: scale(1.1);
}

/* Footer links smooth transitions */
.footer-link {
  transition: color 0.25s ease, transform 0.25s ease;
}
.footer-link:hover {
  color: #ffffff;
  transform: translateX(3px);
}

/* 
========================================================================
   CUSTOM RESPONSIVE GALLERY & IMAGE CARD STYLINGS
========================================================================
*/
.image-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: var(--light-bg);
}

.image-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.1);
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  transition: transform 0.5s ease;
}

.image-card:hover img {
  transform: scale(1.05);
}

.product-gallery {
  position: relative;
  padding: 1.5rem;
  background: var(--gray-bg);
  border-radius: 24px;
  border: 1px solid var(--border-color);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.gallery-item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  background: var(--light-bg);
  transition: all 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 87, 217, 0.2);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

/* Fallback responsive utilities for general page images */
.responsive-img-cover {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
}

/* 
========================================================================
   SCROLL REVEAL ANIMATIONS (Intersection Observer)
========================================================================
*/
.reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-zoom {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Delay modifiers */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Active states */
.reveal.active,
.reveal-up.active,
.reveal-left.active,
.reveal-right.active,
.reveal-zoom.active {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* 
========================================================================
   PRODUCT CATALOGUE GRID & EQUAL HEIGHT CARD UTILITIES
========================================================================
*/
.catalogue-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 991px) {
  .catalogue-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .catalogue-products-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Equal Height Product Cards */
.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card-body {
  flex: 1;
}

.product-card-actions {
  margin-top: auto;
}

/* Product Slider Custom Styles */
#product-slider-container {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

#product-slider-track {
  will-change: transform;
}

.product-slide {
  box-sizing: border-box;
}

/* WhatsApp Chat Widget Styles */
.wa-chat-box-brand-name {
    color: black;
}
.wa-chat-box-brand-subtitle {
    color: black;
}