/* ==========================================
   QuickERP Technologies - Global Styles
   ==========================================*/

/* ==========================================
   CSS Variables - Design System
   ==========================================*/

:root {
  /* Primary Colors */
  --primary-color: #014aad;
  --primary-dark: #003d99;
  --primary-light: #4c9aff;

  /* Secondary Colors */
  --secondary-color: #172b4d;
  --secondary-light: #253858;

  /* Accent Colors */
  --accent-color: #4c9aff;
  --accent-light: #b3d4ff;

  /* Background Colors */
  --bg-white: #ffffff;
  --bg-light: #f4f5f7;
  --bg-dark: #172b4d;

  /* Text Colors */
  --text-primary: #172b4d;
  --text-secondary: #5e6c84;
  --text-light: #7a869a;
  --text-white: #ffffff;

  /* Border Colors */
  --border-color: #dfe1e6;
  --border-light: #ebecf0;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition: all 0.3s ease-in-out;
  --transition-fast: all 0.2s ease-in-out;

  /* Typography */
  --font-family:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

/* ==========================================
   Global Reset & Base Styles
   ==========================================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background-color: var(--bg-white);
  overflow-x: hidden;
}

/* ==========================================
   Typography
   ==========================================*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
h6 {
  font-size: 1rem;
}

p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--primary-dark);
}

/* Section Header  */

/* Section Header */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.75rem;
  background: linear-gradient(90deg, #020c1a, #0d0422);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

.section-subtitle {
  font-size: 1.1rem;
  color: #64748b;
  margin-bottom: 2rem;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.section-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(to right, #014aad, #8b5cf6);
  margin: 0 auto 3rem;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.section-divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}

/* Section Header End  */

/* ==========================================
   Header / Navbar Styles
   ==========================================*/
.main-header {
  background-color: var(--bg-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: var(--transition);
}

.main-header.scrolled {
  box-shadow: var(--shadow-md);
}

/* Navbar Container */
.navbar {
  padding: 1rem 0;
  background-color: transparent;
}

/* Logo Styles */
.navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  font-size: 2rem;
  color: var(--primary-color);
  transition: var(--transition);
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.logo-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary-color);
}

.logo-tagline {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.navbar-brand:hover .logo-icon {
  transform: scale(1.1) rotate(10deg);
  color: var(--primary-dark);
}

/* Navbar Toggle (Mobile) */
.navbar-toggler {
  border: none;
  padding: 0.5rem;
  border-radius: 6px;
  background-color: var(--bg-light);
  transition: var(--transition);
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler:hover {
  background-color: var(--primary-light);
}

.navbar-toggler-icon {
  width: 24px;
  height: 24px;
}

/* Navigation Links */
.navbar-nav {
  gap: 0.5rem;
}

.navbar-nav .nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  transition: var(--transition);
  position: relative;
}

.navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #f26e3f;
  transition: var(--transition);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #014aad;
  background-color: rgba(76, 154, 255, 0.08);
}

.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link.active::before {
  width: 60%;
}

/* CTA Button in Navbar */
.nav-cta {
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  background-color: var(--primary-color);
  color: var(--text-white);
  border: 2px solid var(--primary-color);
  transition: var(--transition);
}

.nav-cta:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--text-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ==========================================
   Mega Menu Styles
   ==========================================*/
/* ==========================================
   Mega Menu Styles
   ==========================================*/
.mega-dropdown {
  position: static;
}

.mega-menu {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  padding: 1rem 0; /* Reduced padding for better scroll handling */
  margin-top: 0;
  border: none;
  border-top: 3px solid var(--primary-color);
  border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow-lg);
  background-color: var(--bg-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
  max-height: 80vh; /* Limit total height */
  overflow-y: auto; /* Make entire mega menu scrollable if needed */
}

/* Custom scrollbar for mega menu */
.mega-menu::-webkit-scrollbar {
  width: 6px;
}

.mega-menu::-webkit-scrollbar-track {
  background: var(--bg-light);
  border-radius: 3px;
}

.mega-menu::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 3px;
}

.mega-menu::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

.mega-dropdown:hover .mega-menu,
.mega-dropdown .dropdown-toggle[aria-expanded="true"] + .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mega Menu Container */
.mega-menu .container {
  max-height: 100%;
}

/* Mega Menu Column */
.mega-menu-column {
  padding: 1rem;
  border-radius: 8px;
  transition: var(--transition);
  height: 100%; /* Full height for scrollable columns */
  display: flex;
  flex-direction: column;
  max-height: 400px; /* Limit column height */
  overflow-y: auto; /* Make column scrollable */
}

/* Custom scrollbar for columns */
.mega-menu-column::-webkit-scrollbar {
  width: 4px;
}

.mega-menu-column::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 2px;
}

.mega-menu-column::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 2px;
}

.mega-menu-column::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

.mega-menu-column:hover {
  background-color: var(--bg-light);
}

.mega-menu-column.featured {
  background-color: rgba(76, 154, 255, 0.05);
  border: 1px solid var(--accent-light);
}

.mega-menu-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--secondary-color);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0; /* Prevent title from shrinking */
}

.mega-menu-title i {
  color: var(--primary-color);
}

.mega-menu-title .badge {
  font-size: 0.65rem;
  padding: 0.25rem 0.5rem;
  background-color: #f26e3f;
  color: var(--text-white);
  border-radius: 4px;
}

/* Mega Menu List */
.mega-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1; /* Take remaining space */
  overflow-y: auto; /* Make list scrollable */
  padding-right: 4px; /* Space for scrollbar */
}

.mega-menu-list li {
  margin-bottom: 0.5rem;
  min-height: 44px; /* Minimum touch target size */
}

.mega-menu-list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 6px;
  transition: var(--transition);
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden;
  text-overflow: ellipsis; /* Add ellipsis for long text */
}

.mega-menu-list a i {
  font-size: 0.7rem;
  color: var(--primary-color);
  transition: var(--transition);
  flex-shrink: 0; /* Prevent icon from shrinking */
}

.mega-menu-list a:hover {
  background-color: #f26e3f;
  color: var(--text-white);
  padding-left: 1rem;
}

.mega-menu-list a:hover i {
  color: var(--text-white);
  transform: translateX(3px);
}

/* ==========================================
   Responsive Styles for Mobile
   ==========================================*/
@media (max-width: 991px) {
  /* Mobile Mega Menu Adjustments */
  .mega-dropdown {
    position: relative;
  }

  .mega-menu {
    position: static;
    width: 100%;
    max-height: 60vh; /* Smaller height for mobile */
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none; /* Bootstrap will control display */
    box-shadow: none;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin-top: 0.5rem;
    padding: 0.5rem;
  }

  .mega-dropdown .dropdown-toggle[aria-expanded="true"] + .mega-menu {
    display: block;
  }

  .mega-menu .container {
    padding: 0;
  }

  .mega-menu .row {
    margin: 0;
  }

  .mega-menu-column {
    max-height: 300px; /* Smaller max height for mobile */
    margin-bottom: 1rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
  }

  .mega-menu-column:last-child {
    margin-bottom: 0;
  }

  .mega-menu-title {
    position: sticky;
    top: 0;
    background-color: var(--bg-white);
    z-index: 1;
    padding-top: 0.5rem;
    margin-top: -0.5rem;
  }

  /* Adjust navbar for mobile */
  .navbar-collapse {
    max-height: 80vh; /* Limit mobile menu height */
    overflow-y: auto;
    padding-bottom: 1rem;
  }

  .mega-menu-list a {
    padding: 0.75rem 0.5rem; /* Larger touch targets for mobile */
    font-size: 0.95rem;
  }

  /* Hide scrollbars on mobile for cleaner look (optional) */
  .mega-menu-column::-webkit-scrollbar {
    display: none;
  }

  .mega-menu-column {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .mega-menu-column::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 768px) {
  .mega-menu {
    max-height: 50vh;
  }

  .mega-menu-column {
    max-height: 250px;
  }
}

/* For very large screens where columns might be too wide */
@media (min-width: 1400px) {
  .mega-menu .container {
    max-width: 90%;
  }
}

/* Ensure dropdowns don't go off-screen */
.dropdown-menu {
  max-width: 100vw;
  background-color: #f3f2f2;
}

/* Mobile dropdown touch improvements */
@media (max-width: 991px) {
  .dropdown-toggle::after {
    float: right;
    margin-top: 8px;
  }

  .mega-dropdown .dropdown-toggle[aria-expanded="true"] {
    background-color: var(--bg-light);
  }
}

/* ==========================================
   Footer Styles
   ==========================================*/
.main-footer {
  background-color: #0f172a;
  color: var(--text-white);
  padding-top: 3rem;
}

.footer-top {
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer Logo */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.footer-logo .logo-icon {
  font-size: 2rem;
  color: var(--primary-light);
}

.footer-logo .logo-name {
  color: var(--text-white);
}

.footer-logo .logo-tagline {
  color: rgba(255, 255, 255, 0.7);
}

/* Footer Description */
.footer-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Footer Social Links */
.footer-social {
  display: flex;
  gap: 0.75rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  font-size: 1rem;
  transition: var(--transition);
}

.social-link:hover {
  background-color: var(--primary-color);
  color: var(--text-white);
  transform: translateY(-3px);
}

/* Footer Title */
.footer-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.75rem;
}

.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background-color: var(--primary-light);
}

/* Footer Links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition);
}

.footer-links a i {
  font-size: 0.7rem;
  color: var(--primary-light);
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--text-white);
  padding-left: 0.5rem;
}

.footer-links a:hover i {
  transform: translateX(3px);
}

/* Footer Contact */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  align-items: center;
}

.footer-contact li i {
  color: var(--primary-light);
  font-size: 1rem;
  width: 20px;
  flex-shrink: 0;
}

/* Footer Bottom */
.footer-bottom {
  padding: 1.5rem 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.copyright-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.copyright-text strong {
  color: var(--text-white);
}

.footer-bottom-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.footer-bottom-links li a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  transition: var(--transition);
}

.footer-bottom-links li a:hover {
  color: var(--text-white);
}

/* ==========================================
   Mobile Responsive Styles
   ==========================================*/
@media (max-width: 991.98px) {
  /* Mobile Navigation */
  .navbar-collapse {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--bg-light);
    border-radius: 8px;
  }

  .nav-link {
    padding: 0.75rem 1rem;
  }

  .nav-link::before {
    display: none;
  }

  .nav-cta {
    margin-top: 0.5rem;
    width: 100%;
    text-align: center;
  }

  /* Mobile Mega Menu */
  .mega-menu {
    position: relative;
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid var(--border-color);
  }

  .mega-menu-column {
    margin-bottom: 1.5rem;
  }

  .mega-menu-column:last-child {
    margin-bottom: 0;
  }

  /* Footer Mobile */
  .footer-bottom-links {
    margin-top: 1rem;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Typography Mobile */
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
}

@media (max-width: 767.98px) {
  .logo-name {
    font-size: 1.25rem;
  }

  .logo-icon {
    font-size: 1.75rem;
  }
}

/* ==========================================
   Utility Classes
   ==========================================*/
.section-padding {
  padding: 5rem 0;
}

.section-padding-sm {
  padding: 3rem 0;
}

.bg-light-custom {
  background-color: var(--bg-light);
}

.text-primary-custom {
  color: var(--primary-color);
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-white);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  transition: var(--transition);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ==========================================
   Smooth Animations
   ==========================================*/
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* ==========================================
   Hero Section Styles - QuickERP Technologies
   ==========================================*/

/* ============================================
   HERO SECTION STYLES
   ============================================ */

/* Hero Section Base */
/* Hero Section Base */
/* Hero Section Base */
.hero-section {
  position: relative;
  height: 100vh;
  max-height: 900px;
  overflow: hidden;
  color: #fff;
  margin-top: 0;
}

.hero-slide {
  position: relative;
  height: 100vh;
  max-height: 900px;
  display: flex;
  align-items: center;
}

.hero-row {
  height: 100%;
}

/* Background Image */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Modern Gradient Overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(20, 40, 80, 0.88) 0%,
    rgba(10, 25, 50, 0.85) 100%
  );
  z-index: 2;
}

/* Animated Background Shapes - Subtle and Professional */
.hero-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(2px);
}

.shape-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  right: 10%;
  animation: float 20s ease-in-out infinite;
}

.shape-2 {
  width: 200px;
  height: 200px;
  bottom: -50px;
  left: 15%;
  animation: float 15s ease-in-out infinite reverse;
}

.shape-3 {
  width: 150px;
  height: 150px;
  top: 50%;
  right: 5%;
  animation: float 18s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-30px) translateX(20px);
  }
}

/* Content Container */
.hero-content {
  position: relative;
  z-index: 3;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.swiper-slide-active .hero-content {
  opacity: 1;
  transform: translateY(0);
}

/* Trust Badge - Clean and Minimal */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

.hero-badge i {
  color: #f26e3f;
  font-size: 1rem;
}

/* Typography */
.hero-title {
  font-size: 3.3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.2rem;
  color: #ffffff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero-description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 600px;
}

/* Button Container */
.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

/* Button Styles */
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

.hero-btn i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

/* Primary Button */
.hero-btn-primary {
  background: linear-gradient(135deg, #0066ff 0%, #004ecb 100%);
  color: #ffffff;
  box-shadow: 0 8px 25px rgba(0, 102, 255, 0.35);
}

.hero-btn-primary:hover {
  background: linear-gradient(135deg, #0052cc 0%, #003d99 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(0, 102, 255, 0.45);
  color: #ffffff;
}

.hero-btn-primary:hover i {
  transform: translateX(3px);
}

/* Outline Button */
.hero-btn-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.hero-btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
  transform: translateY(-3px);
  color: #ffffff;
}

.hero-btn-outline:hover i {
  transform: translateX(5px);
}

/* Quick Stats - Minimal and Professional */
.hero-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.stat-item i {
  font-size: 1.1rem;
  color: #0066ff;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.4rem;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Swiper Pagination */
.heroSwiper .swiper-pagination {
  bottom: 40px !important;
  z-index: 10;
}

.heroSwiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  margin: 0 8px !important;
  transition: all 0.3s ease;
}

.heroSwiper .swiper-pagination-bullet-active {
  background: #ffffff;
  width: 25px;
  height: 6px;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

/* Tablet & Large Mobile */
@media (max-width: 991px) {
  .hero-section,
  .hero-slide {
    max-height: 750px;
    height: 100vh;
  }

  .hero-content {
    text-align: center;
  }

  .hero-badge {
    margin: 0 auto 1.2rem;
  }

  .hero-title {
    font-size: 2.8rem;
    margin-bottom: 1rem;
  }

  .hero-description {
    font-size: 1.2rem;
    margin: 0 auto 1.8rem;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-stats {
    justify-content: center;
    gap: 2rem;
  }

  .shape-1,
  .shape-2 {
    display: none;
  }
}

/* Mobile Devices */
@media (max-width: 767px) {
  .hero-section,
  .hero-slide {
    max-height: 650px;
    height: 100vh;
  }

  .hero-badge {
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hero-description {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
  }

  .hero-btn {
    padding: 0.8rem 1.6rem;
    font-size: 0.95rem;
  }

  .hero-stats {
    gap: 1.5rem;
  }

  .stat-item {
    font-size: 0.88rem;
  }

  .stat-item i {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .heroSwiper .swiper-pagination {
    bottom: 30px !important;
  }

  .hero-shapes {
    display: none;
  }
}

/* Small Mobile */
@media (max-width: 575px) {
  .hero-section,
  .hero-slide {
    max-height: 600px;
  }

  .hero-badge {
    font-size: 0.8rem;
    padding: 0.35rem 0.8rem;
    margin-bottom: 1rem;
  }

  .hero-title {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
  }

  .hero-description {
    font-size: 1rem;
    margin-bottom: 1.3rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 2rem;
  }

  .hero-btn {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    margin: auto;
    width: fit-content;
    justify-content: center;
    padding: 0.85rem 1.5rem;
  }

  .hero-stats {
    gap: 1rem;
    font-size: 0.82rem;
  }

  .stat-item i {
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
  }

  .heroSwiper .swiper-pagination {
    bottom: 20px !important;
  }
}

/* ============================================
   ERP PARTNERS SECTION STYLES - COMPACT VIEW
   ============================================ */

/* Section Container - Made more compact */
.partners-section {
  padding: 50px 0 40px;
  background-color: #f8fafc;
  position: relative;
  min-height: auto;
  overflow: visible;
}

/* Section Header - More compact */
.partners-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a365d;
  margin-bottom: 0.75rem;
  text-align: center;
}

.partners-section-subtitle {
  font-size: 1rem;
  color: #64748b;
  margin-bottom: 1.5rem;
  text-align: center;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

.section-divider {
  width: 50px;
  height: 2px;
  background: linear-gradient(to right, #014aad, #8b5cf6);
  margin: 0 auto 2rem;
  border-radius: 2px;
}

/* Individual Partner Box Styling - More compact */
.partner-box {
  height: 100%;
  background: #ffffff;
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  width: 100%;
  min-height: 280px;
}

/* Partner Logo Container - Smaller */
.partner-logo-container {
  width: 100px;
  height: 60px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
}

/* Partner Logo Image */
.partner-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* filter: grayscale(100%); */
  /* opacity: 0.8; */
  transition: all 0.3s ease;
}

/* Partner Name - Smaller */
.partner-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* Partner Description - Smaller */
.partner-description {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 1rem;
  line-height: 1.4;
  flex-grow: 1;
  max-width: 180px;
}

/* Know More Button - Smaller */
.partner-know-more {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  color: #014aad;
  background-color: transparent;
  border: 1.5px solid #014aad;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  cursor: pointer;
  margin-top: auto;
  white-space: nowrap;
}

/* Hover Effects - More subtle */
.partner-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border-color: #c7d2fe;
}

.partner-box:hover .partner-logo {
  filter: grayscale(0%);
  opacity: 1;
}

.partner-know-more:hover {
  background-color: #014aad;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Responsive Design for Single View */
@media (min-width: 992px) {
  /* Desktop: All 6 boxes in one screen view */
  .partners-section {
    padding: 60px 0 50px;
    min-height: 75vh;
    display: flex;
    align-items: center;
  }

  .partners-section .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .partner-box {
    min-height: 220px;
    /* min-height: 260px; */
  }

  .partner-logo-container {
    width: 120px;
    height: 75px;

    box-shadow:
      rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
      rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  }

  .partner-name {
    font-size: 1.1rem;
  }

  .partner-description {
    font-size: 0.8rem;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  /* Large tablets and small desktops */
  .partners-section {
    padding: 50px 0 40px;
    min-height: 70vh;
  }

  .partner-box {
    padding: 1rem;
    min-height: 250px;
  }

  .partner-logo-container {
    width: 85px;
    height: 50px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  /* Tablet: 2 columns × 3 rows (still fits in one view) */
  .partners-section {
    padding: 40px 0 30px;
    min-height: 85vh;
  }

  .partners-section-title {
    font-size: 1.75rem;
  }

  .partner-box {
    padding: 1rem;
    min-height: 240px;
  }

  .partner-logo-container {
    width: 80px;
    height: 50px;
    margin-bottom: 0.75rem;
  }

  .partner-name {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
  }

  .partner-description {
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
  }

  .partner-know-more {
    padding: 0.4rem 1.25rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 767px) {
  /* Mobile: 1 column × 6 rows - Made more compact */
  .partners-section {
    padding: 30px 0 20px;
    min-height: auto;
  }

  .partners-section-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .partners-section-subtitle {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    padding: 0 0.5rem;
  }

  .section-divider {
    margin-bottom: 1.5rem;
  }

  .partners-section .row {
    gap: 0.75rem;
  }

  .partner-box {
    padding: 1rem;
    min-height: 220px;
    max-width: 320px;
    margin: 0 auto;
    border-radius: 8px;
  }

  .partner-logo-container {
    width: 70px;
    height: 45px;
    margin-bottom: 0.75rem;
  }

  .partner-name {
    font-size: 1rem;
    margin-bottom: 0.35rem;
  }

  .partner-description {
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
    max-width: 160px;
  }

  .partner-know-more {
    padding: 0.35rem 1rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 575px) {
  /* Extra small devices */
  .partner-box {
    min-height: 200px;
    padding: 0.875rem;
  }

  .partner-logo-container {
    width: 65px;
    height: 40px;
  }

  .partner-name {
    font-size: 0.95rem;
  }

  .partner-description {
    font-size: 0.7rem;
  }
}

/* Focus states for accessibility */
.partner-know-more:focus {
  outline: 2px solid #014aad;
  outline-offset: 2px;
}

.partner-box:focus-within {
  border-color: #014aad;
}

/* Prevent horizontal scrolling */
.partners-section .container {
  overflow-x: hidden;
}

/* RESET STYLES - Only for this section's elements */
.scroll-section * {
  /* margin: 0;
  padding: 0;
  box-sizing: border-box; */
}

.scroll-section {
  /* Section container styles */
  width: 100%;
  min-height: 100vh;
  background: #f8fafc;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  color: #1e293b;
  line-height: 1.6;
}

.scroll-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.scroll-section .section-title {
  text-align: center;
  /* margin-bottom: 4rem; */
}

.scroll-section .section-title h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1rem;
}

.scroll-section .section-title p {
  font-size: 1.125rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
}

/* ===== DESKTOP & TABLET LAYOUT (≥1024px) ===== */
@media (min-width: 1024px) {
  .scroll-section .scroll-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    position: relative;
  }

  /* Sticky image container for desktop */
  .scroll-section .image-container {
    position: sticky;
    top: 10rem;
    height: calc(70vh - 2rem);
    max-height: 500px;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  .scroll-section .image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .scroll-section .desktop-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

  .scroll-section .desktop-image.active {
    opacity: 1;
  }

  /* Content blocks for desktop */
  .scroll-section .content-blocks {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding-bottom: 4rem;
  }

  .scroll-section .content-block {
    background: white;
    border-radius: 1rem;
    padding: 2.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .scroll-section .content-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  }

  .scroll-section .block-number {
    display: inline-block;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #014aad, #014aad);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .scroll-section .content-block h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
  }

  .scroll-section .content-block p {
    font-size: 16px;
    color: #808080;
    margin-bottom: 1.5rem;
  }

  /* Hide mobile images on desktop */
  .scroll-section .mobile-image {
    display: none;
  }
}

/* ===== TABLET TRANSITION (768px - 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .scroll-section .scroll-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .scroll-section .image-container {
    position: sticky;
    top: 1.5rem;
    height: calc(100vh - 3rem);
    max-height: 600px;
  }

  .scroll-section .content-blocks {
    gap: 3rem;
  }

  .scroll-section .content-block {
    padding: 2rem;
  }

  .scroll-section .section-title h2 {
    font-size: 2.25rem;
  }
}

/* ===== MOBILE LAYOUT WITH STACKING EFFECT (≤768px) ===== */
@media (max-width: 768px) {
  .scroll-section .scroll-container {
    padding: 1rem;
    position: relative;
  }

  .scroll-section .section-title {
    margin-bottom: 2rem;
    position: relative;
    z-index: 10;
  }

  .scroll-section .section-title h2 {
    font-size: 1.75rem;
  }

  /* Single column stack with overlapping cards */
  .scroll-section .scroll-content {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: calc(100vh - 200px);
  }

  /* Hide desktop image container completely */
  .scroll-section .image-container {
    display: none !important;
  }

  /* Each card will stack on top of previous ones */
  .scroll-section .content-block {
    position: sticky !important;
    top: 80px; /* How far from top of viewport each card sticks */
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin-bottom: -180px; /* Negative margin to make cards overlap */
    z-index: 1;
    transition: all 0.3s ease;
    min-height: 400px; /* Give each card enough height */
    display: flex;
    flex-direction: column;
  }

  /* First card at bottom of stack */
  .scroll-section .content-block:nth-child(1) {
    top: 100px;
    z-index: 1;
    margin-top: 0;
  }

  /* Second card above first */
  .scroll-section .content-block:nth-child(2) {
    top: 120px;
    z-index: 2;
    margin-top: 80px;
  }

  /* Third card above second */
  .scroll-section .content-block:nth-child(3) {
    top: 140px;
    z-index: 3;
    margin-top: 160px;
  }

  /* Fourth card above third */
  .scroll-section .content-block:nth-child(4) {
    top: 160px;
    z-index: 4;
    margin-top: 240px;
  }

  /* Fifth card above fourth (if you add more) */
  .scroll-section .content-block:nth-child(5) {
    top: 180px;
    z-index: 5;
    margin-top: 320px;
  }

  /* Mobile images inside cards */
  .scroll-section .mobile-image {
    display: block;
    width: 100%;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .scroll-section .mobile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .scroll-section .block-number {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .scroll-section .content-block h3 {
    font-size: 1.375rem;
    margin-bottom: 0.75rem;
  }

  .scroll-section .content-block p {
    font-size: 0.9375rem;
    margin-bottom: 1rem;
    display: none;
  }

  /* Ensure desktop images are hidden */
  .scroll-section .desktop-image {
    display: none !important;
  }

  /* Make sure content blocks container has enough space for stacking */
  .scroll-section .content-blocks {
    position: relative;
    padding-bottom: 200px; /* Extra space for stacking effect */
  }

  /* When scrolling, active card gets emphasized */
  .scroll-section .content-block.active-card {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    transform: scale(1.02);
  }
}

/* ===== UTILITY CLASSES ===== */
.scroll-section .hidden {
  display: none !important;
}

.scroll-section .active {
  /* Active state for desktop images */
  opacity: 1 !important;
}

/* ============================================
   SERVICES TABS SECTION - PREMIUM DESIGN
   ============================================ */

/* Section Container */
.services-tabs-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

/* Section Header */
.services-section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.75rem;
  background: linear-gradient(90deg, #014aad, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
}

.services-section-subtitle {
  font-size: 1.1rem;
  color: #64748b;
  margin-bottom: 2rem;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.section-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(to right, #014aad, #8b5cf6);
  margin: 0 auto 3rem;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.section-divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}

/* Tabs Navigation Container */
.services-tabs-nav-container {
  margin-bottom: 3rem;
  position: relative;
}

/* Modern Pill Tabs */
.services-tabs-nav {
  gap: 1rem 2.2rem;
  padding: 1rem 0rem;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  border: 1px solid #e2e8f0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.services-tabs-nav::-webkit-scrollbar {
  display: none;
}

/* Individual Tab Items */
.services-tabs-nav .nav-item {
  flex-shrink: 0;
}

.services-tabs-nav .nav-link {
  padding: 0.875rem 1.5rem;
  color: #64748b;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 50px;
  border: 1px solid #64748b;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.services-tabs-nav .nav-link:hover {
  color: #014aad;
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-1px);
}

.services-tabs-nav .nav-link.active {
  color: #ffffff;
  background: linear-gradient(135deg, #014aad 0%, #8b5cf6 100%);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}

/* Tab Icons */
.tab-icon {
  font-size: 1.1rem;
  opacity: 0.9;
}

.services-tabs-nav .nav-link.active .tab-icon {
  opacity: 1;
  animation: iconPop 0.3s ease;
}

@keyframes iconPop {
  0% {
    transform: scale(0.8);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Tab Content Area */
.services-tab-content {
  position: relative;
}

/* Smooth Tab Transition */
.services-tab-content .tab-pane {
  animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Service Cards */
.service-card {
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  position: relative;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #014aad, #195292);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
  border-color: #e0e7ff;
}

.service-card:hover::before {
  opacity: 1;
}

/* Card Image */
.service-card-image {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

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

/* Card Body */
.service-card-body {
  padding: 1.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.service-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.service-card-description {
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  flex-grow: 1;
}

/* Know More Button */
.service-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  color: #014aad;
  background: rgba(59, 130, 246, 0.08);
  border: 2px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.service-card-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(59, 130, 246, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.service-card-btn:hover {
  background: #014aad;
  color: #ffffff;
  border-color: #014aad;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.service-card-btn:hover::before {
  left: 100%;
}

/* Responsive Design */
@media (max-width: 1199px) {
  .services-tabs-section {
    padding: 70px 0;
  }

  .services-section-title {
    font-size: 2.25rem;
  }

  .service-card-image {
    height: 180px;
  }
}

@media (max-width: 991px) {
  /* Tablet: 2 cards per row */
  .services-tabs-section {
    padding: 60px 0;
  }

  .services-section-title {
    font-size: 2rem;
  }

  .services-tabs-nav {
    flex-wrap: wrap;
    /* flex-wrap: nowrap; */
    overflow-x: auto;
    justify-content: flex-start;
    width: 100%;
    border-radius: 12px;
  }

  .service-card-body {
    padding: 1.5rem;
  }

  .service-card-title {
    font-size: 1.25rem;
  }

  .service-card-description {
    font-size: 0.9rem;
  }
}

@media (max-width: 767px) {
  /* Mobile: 1 card per row */
  .services-tabs-section {
    padding: 50px 0;
  }

  .services-section-title {
    font-size: 1.75rem;
  }

  .services-section-subtitle {
    font-size: 1rem;
    padding: 0 1rem;
  }

  .services-tabs-nav-container {
    margin-bottom: 2.5rem;
  }

  .services-tabs-nav .nav-link {
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
  }

  .service-card {
    max-width: 400px;
    margin: 0 auto;
  }

  .service-card-image {
    height: 160px;
  }

  .service-card-body {
    padding: 1.25rem;
  }

  .service-card-title {
    font-size: 1.2rem;
  }

  .service-card-btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 575px) {
  /* Small mobile devices */
  .services-tabs-section {
    padding: 40px 0;
  }

  .services-section-title {
    font-size: 1.5rem;
  }

  .services-tabs-nav {
    padding: 0.25rem;
    border-radius: 10px;
  }

  .services-tabs-nav .nav-link {
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
  }

  .tab-icon {
    font-size: 1rem;
  }

  .service-card-image {
    height: 150px;
  }

  .service-card-btn {
    padding: 0.6rem 1.2rem;
  }
}

/* Accessibility Enhancements */
.services-tabs-nav .nav-link:focus {
  outline: 2px solid #014aad;
  outline-offset: 2px;
}

.service-card-btn:focus {
  outline: 2px solid #014aad;
  outline-offset: 2px;
}

/* Active State Animation */
.service-card-btn:active {
  transform: translateY(0);
}

/* ============================================
   ABOUT US SECTION STYLES
   ============================================ */

/* Section Container */
.about-us-section {
  padding: 60px 0;
  background-color: #ffffff;
  position: relative;
}

/* About Content Area */
.about-content {
  padding-right: 2rem;
}

/* About Heading - Business-focused */
.about-heading {
  font-size: 2rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

/* About Paragraphs - Professional spacing */
.about-paragraphs {
  margin-bottom: 2.5rem;
}

.about-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 1.25rem;
}

.about-text:last-child {
  margin-bottom: 0;
}

/* Key Highlights - Icon-based features */
.about-highlights {
  margin-bottom: 2.5rem;
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 1rem 0rem;
  background: #f8fafc;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.highlight-item:hover {
  background: #f1f5f9;
  transform: translateX(5px);
}

.highlight-icon {
  font-size: 1.75rem;
  margin-right: 1rem;
  flex-shrink: 0;
  opacity: 0.9;
}

.highlight-item:hover .highlight-icon {
  opacity: 1;
}

.highlight-content {
  flex: 1;
}

.highlight-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.highlight-text {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Call to Action Button */
.about-cta {
  margin-top: 1.5rem;
}

.about-btn {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: linear-gradient(135deg, #014aad 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  position: relative;
  overflow: hidden;
}

.about-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.about-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
  color: #ffffff;
  text-decoration: none;
}

.about-btn:hover::before {
  left: 100%;
}

.about-btn:active {
  transform: translateY(0);
}

/* Image Container */
.about-image-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  background: #f8fafc;
}

/* Professional Business Image */
.about-image {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.about-image-container:hover .about-image {
  transform: scale(1.02);
}

/* Subtle Image Overlay */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.1) 0%,
    rgba(15, 23, 42, 0.05) 100%
  );
  pointer-events: none;
}

/* Responsive Design */
@media (max-width: 1199px) {
  .about-us-section {
    padding: 70px 0;
  }

  .about-heading {
    font-size: 1.8rem;
  }

  .about-image {
    height: 420px;
  }
}

@media (max-width: 991px) {
  /* Tablet: Stacked Layout */
  .about-us-section {
    padding: 60px 0;
  }

  .about-content {
    padding-right: 0;
  }

  .about-heading {
    font-size: 1.7rem;
    text-align: center;
  }

  .about-paragraphs {
    text-align: center;
  }

  .about-text {
    font-size: 1rem;
  }

  .about-highlights {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .about-cta {
    text-align: center;
  }

  .about-image {
    height: 380px;
  }

  .about-image-container {
    /* margin-bottom: 2.5rem; */
  }
}

@media (max-width: 767px) {
  /* Mobile: Image on top, Text below */
  .about-us-section {
    padding: 50px 0;
  }

  .row.align-items-center.g-5 {
    gap: 2rem !important;
  }

  .about-heading {
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
  }

  .about-text {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .highlight-item {
    padding: 0.875rem;
    margin-bottom: 1rem;
  }

  .highlight-icon {
    font-size: 1.5rem;
    margin-right: 0.875rem;
  }

  .highlight-title {
    font-size: 1rem;
  }

  .highlight-text {
    font-size: 0.85rem;
  }

  .about-btn {
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    width: 100%;
    max-width: 280px;
  }

  .about-image {
    height: 320px;
  }

  .about-image-container {
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  }
}

@media (max-width: 575px) {
  /* Small Mobile Devices */
  .about-us-section {
    padding: 40px 0;
  }

  .about-heading {
    font-size: 1.4rem;
  }

  .about-text {
    font-size: 0.9rem;
  }

  .highlight-item {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 1rem;
  }

  .highlight-icon {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }

  .about-btn {
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
  }

  .about-image {
    height: 320px;
    /* height: 280px; */
  }
}

/* Accessibility Enhancements */
.about-btn:focus {
  outline: 2px solid #014aad;
  outline-offset: 3px;
}

.highlight-item:focus-within {
  box-shadow: 0 0 0 2px #014aad;
}

/* Ensure no layout breaks */
.about-us-section .container {
  overflow: hidden;
}

/* ============================================
   ACHIEVEMENT COUNTERS SECTION - MODERN DESIGN
   ============================================ */

/* Section Container - Compact height */
.achievement-counters-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle background pattern */
.achievement-counters-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      circle at 20% 30%,
      rgba(59, 130, 246, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(139, 92, 246, 0.03) 0%,
      transparent 50%
    );
  pointer-events: none;
}

/* Counter Item Container */
.counter-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  border: 1px solid #f1f5f9;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hover Effect - Subtle lift */
.counter-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  border-color: #e0e7ff;
}

/* Counter Visual Area - Horizontal Icon + Number */
.counter-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
}

/* Icon Styling - Subtle and modern */
.counter-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #014aad 0%, #014aad 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
}

.counter-item:hover .counter-icon {
  transform: scale(1.05) rotate(5deg);
}

/* Number Wrapper */
.counter-number-wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Number Styling - Prominent but elegant */
.counter-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Plus Symbol */
.counter-symbol {
  font-size: 1.8rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1;
}

/* Counter Content Area */
.counter-content {
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

/* Title Styling */
.counter-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* Description - Compact and clean */
.counter-description {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
  max-width: 200px;
}

/* Decorative Line - Visual separation */
.counter-line {
  width: 40px;
  height: 3px;
  background: linear-gradient(to right, #014aad, #f26e3f);
  border-radius: 2px;
  margin-top: auto;
  opacity: 0.8;
  transition: width 0.3s ease;
}

.counter-item:hover .counter-line {
  width: 60px;
}

/* Responsive Design */
@media (max-width: 1199px) {
  .achievement-counters-section {
    padding: 50px 0;
  }

  .counter-item {
    padding: 1.75rem;
  }

  .counter-number {
    font-size: 2.25rem;
  }

  .counter-icon {
    width: 55px;
    height: 55px;
    font-size: 1.4rem;
  }
}

@media (max-width: 991px) {
  /* Tablet: 2 counters per row */
  .achievement-counters-section {
    padding: 45px 0;
  }

  .counter-item {
    padding: 1.5rem;
    max-width: 320px;
    margin: 0 auto;
  }

  .counter-visual {
    gap: 0.875rem;
  }

  .counter-number {
    font-size: 2rem;
  }

  .counter-symbol {
    font-size: 1.25rem;
  }

  .counter-icon {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }

  .counter-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 767px) {
  /* Mobile: Stacked layout */
  .achievement-counters-section {
    padding: 40px 0;
  }

  .counter-item {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }

  .row.g-4.justify-content-center {
    gap: 1rem !important;
  }

  .counter-visual {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }

  .counter-number-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .counter-number {
    font-size: 2.25rem;
  }

  .counter-symbol {
    font-size: 1.5rem;
  }

  .counter-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}

@media (max-width: 575px) {
  /* Small mobile devices */
  .achievement-counters-section {
    padding: 35px 0;
  }

  .counter-item {
    padding: 1.25rem;
  }

  .counter-number {
    font-size: 2rem;
  }

  .counter-icon {
    width: 55px;
    height: 55px;
    font-size: 1.4rem;
  }

  .counter-title {
    font-size: 1.1rem;
  }

  .counter-description {
    font-size: 0.85rem;
  }
}

/* Animation Keyframes */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation Class */
.counter-item.animated {
  animation: countUp 0.6s ease-out forwards;
}

/* Accessibility */
.counter-item:focus-within {
  outline: 2px solid #014aad;
  outline-offset: 3px;
}

/* ============================================
   INFINITE CLIENT LOGOS SECTION - PREMIUM ANIMATION
   ============================================ */

/* Section Container */
.infinite-clients-section {
  padding: 70px 0 40px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

/* Gradient Edge Fades - Creates seamless infinite illusion */
.logo-track-wrapper {
  position: relative;
  /* padding: 3rem 0;
  margin-top: 2rem; */
}

.logo-track-wrapper::before,
.logo-track-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}

.logo-track-wrapper::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(248, 250, 252, 1) 0%,
    rgba(248, 250, 252, 0.9) 25%,
    rgba(248, 250, 252, 0.6) 50%,
    rgba(248, 250, 252, 0.3) 75%,
    rgba(248, 250, 252, 0) 100%
  );
}

.logo-track-wrapper::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(248, 250, 252, 1) 0%,
    rgba(248, 250, 252, 0.9) 25%,
    rgba(248, 250, 252, 0.6) 50%,
    rgba(248, 250, 252, 0.3) 75%,
    rgba(248, 250, 252, 0) 100%
  );
}

/* Logo Track Rows */
.logo-track-row {
  position: relative;
  padding: 1.5rem 0;
}

.logo-track-row:first-child {
  margin-bottom: 0.5rem;
}

/* Infinite Animation Container */
.logo-track {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* INFINITE LOOP TECHNIQUE:
   Two identical sets of logos are placed side by side.
   The animation moves the entire track, and when the first set
   moves completely out of view, the second set takes its place,
   creating a seamless loop with no visible jump.
*/

/* Primary Row Animation - Moves Left to Right */
.logo-track-primary .logo-track {
  animation-name: moveLeftToRight;
  animation-duration: 60s; /* Slow, premium speed */
}

/* Secondary Row Animation - Moves Right to Left (Opposite) */
.logo-track-secondary .logo-track {
  animation-name: moveRightToLeft;
  animation-duration: 50s; /* Slightly different speed for visual interest */
}

/* Animation Keyframes */
@keyframes moveLeftToRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(
      -50%
    ); /* Moves exactly half width for seamless loop */
  }
}

@keyframes moveRightToLeft {
  0% {
    transform: translateX(-50%); /* Starts offset for seamless loop */
  }
  100% {
    transform: translateX(0);
  }
}

/* Logo Items */
.logo-item {
  flex-shrink: 0;
  width: 140px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #ffffff;
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: 1px solid #f1f5f9;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); */
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

/* Logo Images */
.logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* filter: grayscale(100%) brightness(0.9); */
  /* opacity: 0.7; */
  transition: all 0.4s ease;
}

/* HOVER EFFECTS - Pause animation on row hover */
.logo-track-row:hover .logo-track {
  animation-play-state: paused;
}

/* Individual logo hover effects */
.logo-item:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.15);
  border-color: #e0e7ff;
  z-index: 10;
}

.logo-item:hover img {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
  transform: scale(1.1);
}

/* Subtle glow effect on hover */
.logo-item::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #014aad, #8b5cf6);
  border-radius: 14px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.logo-item:hover::after {
  opacity: 0.3;
}

/* Responsive Design */
@media (max-width: 1199px) {
  .infinite-clients-section {
    padding: 60px 0 30px;
  }

  .logo-item {
    width: 140px;
    height: 70px;
  }

  .logo-track {
    gap: 3rem;
  }
}

@media (max-width: 991px) {
  .infinite-clients-section {
    padding: 50px 0 20px;
  }

  .logo-track-wrapper {
    padding: 2.5rem 0;
  }

  .logo-item {
    width: 120px;
    height: 60px;
    padding: 0.75rem;
  }

  .logo-track {
    gap: 2.5rem;
  }

  /* Adjust gradient fade width on tablet */
  .logo-track-wrapper::before,
  .logo-track-wrapper::after {
    width: 80px;
  }
}

@media (max-width: 767px) {
  .infinite-clients-section {
    padding: 40px 0 15px;
  }

  .logo-track-wrapper {
    padding: 2rem 0;
    margin-top: 1.5rem;
  }

  .logo-track-row {
    padding: 1rem 0;
  }

  .logo-item {
    width: 100px;
    height: 50px;
    padding: 0.5rem;
    border-radius: 8px;
  }

  .logo-track {
    gap: 2rem;
  }

  /* Slower animation on mobile for better performance */
  .logo-track-primary .logo-track {
    animation-duration: 80s;
  }

  .logo-track-secondary .logo-track {
    animation-duration: 70s;
  }

  /* Reduce gradient fade width on mobile */
  .logo-track-wrapper::before,
  .logo-track-wrapper::after {
    width: 50px;
  }
}

@media (max-width: 575px) {
  .logo-item {
    width: 90px;
    height: 45px;
  }

  .logo-track {
    gap: 1.5rem;
  }

  .logo-track-wrapper::before,
  .logo-track-wrapper::after {
    width: 30px;
  }
}

/* Performance Optimizations */
.logo-track {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    width: 100%;
  }

  .logo-track-row {
    overflow: visible;
  }

  .logo-track-wrapper::before,
  .logo-track-wrapper::after {
    display: none;
  }
}

/* ============================================
   QUICK LEAD FORM SECTION - INLINE STYLES
   ============================================ */

/* Section Container */
.quick-lead-form-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
}

/* Section Header */
.form-section-title {
  font-size: 2rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 0.75rem;
  text-align: center;
}

.form-section-subtitle {
  font-size: 1.05rem;
  color: #64748b;
  margin-bottom: 1.5rem;
  text-align: center;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.form-section-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #014aad, #8b5cf6);
  margin: 0 auto 2.5rem;
  border-radius: 2px;
}

/* Form Container */
.quick-lead-form {
  /* max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px; */
}

/* Form Group - Input Containers */
.form-group {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Form Labels */
.form-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.5rem;
  display: block;
}

.form-label-empty {
  opacity: 0;
  pointer-events: none;
}

/* Custom Input Styling (without affecting .form-control) */
.quick-lead-form .form-control {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: #1e293b;
  background-color: #ffffff;
  transition: all 0.2s ease;
  height: 48px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.quick-lead-form .form-control::placeholder {
  color: #94a3b8;
  opacity: 0.8;
}

/* Input Focus States */
.quick-lead-form .form-control:focus {
  border-color: #014aad;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  outline: none;
}

/* Input Valid/Invalid States */
.quick-lead-form .form-control:valid:not(:placeholder-shown) {
  border-color: #10b981;
}

.quick-lead-form .form-control:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
}

/* Submit Button */
.btn-submit {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #014aad 0%, #2563eb 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  margin-bottom: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-submit:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.btn-submit:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
}

.btn-submit:focus {
  outline: 2px solid #014aad;
  outline-offset: 2px;
}

/* Disabled State */
.btn-submit:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.7;
}

/* Form Error Messages */
.form-error {
  font-size: 0.8rem;
  color: #ef4444;
  min-height: 1.2rem;
  margin-top: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.form-error.show {
  opacity: 1;
}

/* Form Notice */
.form-notice {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 1rem;
  opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 1199px) {
  .quick-lead-form-section {
    padding: 50px 0;
  }

  .form-section-title {
    font-size: 1.8rem;
  }

  .form-section-subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 991px) {
  /* Tablet: 2 fields per row */
  .quick-lead-form-section {
    padding: 45px 0;
  }

  .form-section-title {
    font-size: 1.6rem;
  }

  .row.g-3.align-items-end.justify-content-center {
    max-width: 600px;
    margin: 0 auto;
  }

  .col-md-6 {
    margin-bottom: 0.5rem;
  }

  .form-group {
    height: auto;
  }
}

@media (max-width: 767px) {
  /* Mobile: Fully stacked */
  .quick-lead-form-section {
    padding: 40px 0;
  }

  .form-section-title {
    font-size: 1.5rem;
  }

  .form-section-subtitle {
    font-size: 0.95rem;
    padding: 0 1rem;
  }

  .quick-lead-form {
    padding: 0;
  }

  .row.g-3.align-items-end.justify-content-center {
    gap: 1rem !important;
  }

  .col-lg-3,
  .col-md-6 {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .form-group {
    margin-bottom: 0.5rem;
  }

  .form-label-empty {
    display: none;
  }

  .btn-submit {
    margin-top: 0.5rem;
    margin-bottom: 0px;
  }
}

@media (max-width: 575px) {
  /* Small mobile devices */
  .quick-lead-form-section {
    padding: 35px 0;
  }

  .form-section-title {
    font-size: 1.4rem;
  }

  .form-section-subtitle {
    font-size: 0.9rem;
  }

  .quick-lead-form .form-control {
    padding: 0.7rem 0.875rem;
    font-size: 0.95rem;
    height: 46px;
  }

  .btn-submit {
    height: 46px;
    font-size: 0.95rem;
    padding: 0.7rem 1.25rem;
    margin-bottom: 0px;
  }
}

/* Print Styles */
@media print {
  .quick-lead-form-section {
    display: none;
  }
}

/* ============================================
   BREADCRUMB SECTION - REUSABLE COMPONENT
   ============================================ */

/* Breadcrumb Section Container
   Background image is set via inline style on the section element
   To change image per page, update the style attribute in HTML
   Example: style="background-image: url('page-specific-image.jpg');"
*/
.breadcrumb-section {
  position: relative;
  padding: 100px 0 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Creates parallax effect on desktop */
  color: #ffffff;
  margin-top: 0; /* Ensure no gap after navbar */
}

/* Dark Overlay - Ensures text readability on any background
   Uses gradient for better text contrast while keeping image visible
*/
.breadcrumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.85) 0%,
    rgba(30, 41, 59, 0.75) 100%
  );
  z-index: 1;
}

/* Content Container - Positioned above overlay */
.breadcrumb-section .container {
  position: relative;
  z-index: 2;
}

/* Page Title - Main heading */
.page-title {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Breadcrumb Container */
.breadcrumb {
  padding: 0;
  margin: 0;
  background: transparent;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Breadcrumb Items */
.breadcrumb-item {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Home icon */
.breadcrumb-item .fa-home {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Breadcrumb Links (non-active items) */
.breadcrumb-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb-link:hover {
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* Breadcrumb Separator */
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
  margin-right: 0.5rem;
  font-weight: 400;
}

/* Active Breadcrumb Item */
.breadcrumb-item.active {
  color: #ffffff;
  font-weight: 500;
  opacity: 1;
}

/* Active item doesn't need separator */
.breadcrumb-item.active::before {
  color: rgba(255, 255, 255, 0.8);
}

/* Responsive Design */
@media (max-width: 1199px) {
  .breadcrumb-section {
    padding: 90px 0 70px;
    background-attachment: scroll; /* Remove parallax on tablets for performance */
  }

  .page-title {
    font-size: 2.75rem;
  }
}

@media (max-width: 991px) {
  /* Tablet */
  .breadcrumb-section {
    padding: 80px 0 60px;
  }

  .page-title {
    font-size: 2.5rem;
  }

  .breadcrumb-item {
    font-size: 0.95rem;
  }
}

@media (max-width: 767px) {
  /* Mobile */
  .breadcrumb-section {
    padding: 70px 0 50px;
    text-align: center;
    background-attachment: scroll;
  }

  .page-title {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }

  .breadcrumb {
    justify-content: center;
  }

  .breadcrumb-item {
    font-size: 0.9rem;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    margin-right: 0.375rem;
  }
}

@media (max-width: 575px) {
  /* Small mobile devices */
  .breadcrumb-section {
    padding: 60px 0 40px;
  }

  .page-title {
    font-size: 1.75rem;
  }

  .breadcrumb {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }

  /* Remove separators in stacked layout */
  .breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: none;
  }

  .breadcrumb-item {
    justify-content: center;
  }

  .breadcrumb-link {
    justify-content: center;
  }
}

/* Print Styles */
@media print {
  .breadcrumb-section {
    background: none !important;
    padding: 40px 0 20px;
    color: #000000;
  }

  .breadcrumb-overlay {
    display: none;
  }

  .page-title {
    color: #000000;
    text-shadow: none;
  }

  .breadcrumb-item {
    color: #000000;
  }

  .breadcrumb-link {
    color: #000000;
  }

  .breadcrumb-item + .breadcrumb-item::before {
    color: #000000;
  }
}

/* Accessibility Enhancements */
.breadcrumb-link:focus {
  outline: 2px solid #014aad;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Screen Reader Only - Additional context */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   ACHIEVEMENTS SECTION - MODERN GRID GALLERY
   ============================================ */

/* Section Container */
.achievements-section {
  padding: 60px 0;
  background-color: #ffffff;
  position: relative;
}

/* Achievement Card Container */
.achievement-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  border: 1px solid #f1f5f9;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

/* HOW IMAGES STAY SAME SIZE:
   Using aspect-ratio: 1 / 1 creates perfect square containers
   object-fit: cover ensures images fill the container without stretching
   Fixed height on containers ensures uniform grid appearance
*/
.achievement-image-container {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.achievement-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 1.5rem;
  transition: transform 0.5s ease;
  background: #ffffff;
}

/* Hover Overlay Effect */
.achievement-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.view-icon {
  font-size: 2rem;
  color: #ffffff;
  opacity: 0.9;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

/* Hover Effects */
.achievement-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  border-color: #e0e7ff;
}

.achievement-card:hover .achievement-overlay {
  opacity: 1;
}

.achievement-card:hover .view-icon {
  transform: scale(1);
}

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

/* Achievement Caption */
.achievement-caption {
  padding: 1.25rem;
  text-align: center;
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.achievement-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
}

/* ============================================
   LIGHTBOX / MODAL STYLES
   ============================================ */

/* HOW GALLERY CLICK WORKS:
   1. Clicking any achievement-card triggers JavaScript
   2. JS reads data-image and data-title attributes
   3. Populates lightbox with larger image and title
   4. Lightbox becomes visible via CSS class
*/

/* Lightbox Container (Hidden by default) */
.achievement-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  pointer-events: none;
}

/* Active state when lightbox is open */
.achievement-lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Overlay behind lightbox */
.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(4px);
}

/* Lightbox Content */
.lightbox-content {
  position: relative;
  z-index: 10000;
  max-width: 90%;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.achievement-lightbox.active .lightbox-content {
  transform: scale(1);
}

/* Close Button */
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  color: #0f172a;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.lightbox-close:hover {
  background: #ffffff;
  transform: rotate(90deg);
}

.lightbox-close:focus {
  outline: 2px solid #014aad;
  outline-offset: 2px;
}

/* Lightbox Image Container */
.lightbox-image-container {
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

.lightbox-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  padding: 2rem;
  display: block;
}

/* Lightbox Caption */
.lightbox-caption {
  padding: 1.5rem;
  text-align: center;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
}

.lightbox-caption h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1199px) {
  /* Desktop: 3 items per row on smaller desktops */
  .achievement-image-container {
    height: 220px;
  }
}

@media (max-width: 991px) {
  /* Tablet: 3 items per row */
  .achievements-section {
    padding: 70px 0;
  }

  .achievement-image-container {
    height: 200px;
  }

  .achievement-caption {
    padding: 1rem;
  }

  .achievement-title {
    font-size: 0.95rem;
  }
}

@media (max-width: 767px) {
  /* Mobile: 2 items per row */
  .achievements-section {
    padding: 60px 0;
  }

  .achievement-image-container {
    height: 180px;
  }

  .achievement-image {
    padding: 1rem;
  }

  .lightbox-content {
    max-width: 95%;
    border-radius: 12px;
  }

  .lightbox-image {
    padding: 1.5rem;
  }

  .lightbox-caption {
    padding: 1.25rem;
  }

  .lightbox-caption h3 {
    font-size: 1.1rem;
  }
}

@media (max-width: 575px) {
  /* Small mobile: 1 item per row */
  .achievements-section {
    padding: 50px 0;
  }

  .row.g-4.justify-content-center {
    max-width: 400px;
    margin: 0 auto;
  }

  .achievement-image-container {
    height: 220px;
  }

  .achievement-card {
    max-width: 320px;
    margin: 0 auto;
  }

  .lightbox-close {
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
  }
}

/* HOW TO ADD/REMOVE IMAGES EASILY:
   1. Copy an existing col div with achievement-card
   2. Update data-image attribute with large image URL (for lightbox)
   3. Update src attribute with thumbnail image URL
   4. Update alt text and data-title attribute
   5. Update achievement-title text inside
   
   To remove: Simply delete the col div
   The grid will automatically reflow
*/

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .achievement-card:active {
    transform: translateY(-3px);
  }

  .achievement-overlay {
    opacity: 0;
    /* Don't show overlay on touch unless actively tapping */
  }

  .achievement-card:active .achievement-overlay {
    opacity: 0.8;
  }
}

/* ============================================
   ACHIEVEMENTS SLIDER STYLES - FIXED RESPONSIVENESS
   ============================================ */

/* Slider Container - Fixed to respect container width */
.achievements-slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0 50px; /* Space for navigation buttons */
  margin: 0 auto; /* Center align, no negative margins */
  overflow: visible; /* Allow buttons to show */
}

/* Swiper Container - Contained properly */
.achievementsSwiper {
  padding: 20px 0 40px; /* Vertical padding only */
  width: 100%;
  overflow: visible; /* Let Swiper handle overflow */
}

/* Swiper Wrapper - Ensure proper containment */
.achievementsSwiper .swiper-wrapper {
  align-items: stretch; /* Make all slides equal height */
}

/* Swiper Slide - Fixed sizing */
.achievementsSwiper .swiper-slide {
  height: auto; /* Let content determine height */
  display: flex;
  box-sizing: border-box; /* Include padding in width */
}

/* Ensure achievement card fills slide properly */
.achievementsSwiper .swiper-slide .achievement-card {
  width: 100%;
  margin: 0;
  flex: 1; /* Take full available space */
  box-shadow:
    rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
    rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

/* Navigation Buttons - Fixed positioning */
.achievements-prev,
.achievements-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #014aad;
}

.achievements-prev:hover,
.achievements-next:hover {
  background: #014aad;
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

.achievements-prev {
  left: 5px; /* Adjust to stay within container */
}

.achievements-next {
  right: 5px; /* Adjust to stay within container */
}

.achievements-prev i,
.achievements-next i {
  font-size: 1.25rem;
  font-weight: bold;
}

/* Disabled state */
.achievements-prev.swiper-button-disabled,
.achievements-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: translateY(-50%);
}

.achievements-prev.swiper-button-disabled:hover,
.achievements-next.swiper-button-disabled:hover {
  background: #ffffff;
  color: #014aad;
  transform: translateY(-50%);
}

/* ============================================
   FIX FOR MOBILE HORIZONTAL SCROLL ISSUE
   ============================================ */

/* Container fix for mobile overflow */
@media (max-width: 767px) {
  .achievements-section .container {
    overflow: hidden; /* Prevent horizontal scroll */
    padding-left: 15px;
    padding-right: 15px;
  }

  .achievements-slider-container {
    padding: 0 40px; /* Reduce padding on mobile */
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Hide any overflow */
  }

  .achievementsSwiper {
    padding: 15px 0 35px;
    overflow: hidden;
    width: 100%;
  }

  /* Ensure slides don't overflow */
  .achievementsSwiper .swiper-slide {
    width: calc(100% - 10px) !important; /* Force proper width */
    margin: 0 5px;
  }

  .achievements-prev,
  .achievements-next {
    width: 40px;
    height: 40px;
  }

  .achievements-prev i,
  .achievements-next i {
    font-size: 1rem;
  }

  .achievements-prev {
    left: 0;
  }

  .achievements-next {
    right: 0;
  }
}

/* Extra small mobile fixes */
@media (max-width: 575px) {
  .achievements-slider-container {
    padding: 0 35px;
  }

  .achievements-prev,
  .achievements-next {
    width: 36px;
    height: 36px;
    top: 40%;
  }

  .achievements-prev i,
  .achievements-next i {
    font-size: 0.9rem;
  }

  /* Fix for very small screens */
  .achievementsSwiper .swiper-slide {
    width: 100% !important; /* Force full width on single slide */
    margin: 0;
  }
}

/* Small screen optimization */
@media (max-width: 480px) {
  .achievements-slider-container {
    padding: 0 30px;
  }

  .achievements-prev,
  .achievements-next {
    width: 34px;
    height: 34px;
  }

  .achievements-prev i,
  .achievements-next i {
    font-size: 0.85rem;
  }

  /* Ensure buttons don't touch edges */
  .achievements-prev {
    left: 5px;
  }

  .achievements-next {
    right: 5px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .achievements-prev,
  .achievements-next {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
  }

  .achievements-prev:active,
  .achievements-next:active {
    transform: translateY(-50%) scale(0.95);
  }
}

/* ============================================
   ADDITIONAL FIXES FOR SWIPER OVERFLOW
   ============================================ */

/* Prevent any horizontal overflow in the section */
.achievements-section {
  overflow: hidden; /* Important: prevents horizontal scroll */
}

/* Ensure Swiper slides stay within bounds */
.achievementsSwiper .swiper-slide {
  max-width: 100%;
}

/* Fix for Swiper's own overflow issues */
.swiper {
  max-width: 100%;
  position: relative;
}

/* Ensure achievement cards don't cause overflow */
.achievement-card {
  max-width: 100%;
  box-sizing: border-box;
}

/* Container width enforcement */
.achievements-section .container {
  /* max-width: 100%; */
  overflow: hidden;
}

/* ============================================
   TESTIMONIALS SECTION - PROFESSIONAL SLIDER
   ============================================ */

/* Section Container */
.testimonials-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

/* Slider Container */
.testimonials-slider-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 60px; /* Space for navigation buttons */
}

/* BUTTON POSITIONING LOGIC:
   - Buttons are positioned absolutely at left/right edges
   - Using transform: translateY(-50%) centers them vertically
   - Padding on container prevents overlap with content
   - Mobile: Buttons move closer to content with smaller size
*/

/* Navigation Buttons */
.testimonial-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  color: #014aad;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  outline: none;
}

.testimonial-nav-btn:hover {
  background: #014aad;
  color: #ffffff;
  border-color: #014aad;
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
}

.testimonial-nav-btn:active {
  transform: translateY(-50%) scale(0.98);
}

/* Previous Button - Left Side */
.testimonial-nav-prev {
  left: 0;
}

/* Next Button - Right Side */
.testimonial-nav-next {
  right: 0;
}

/* Testimonial Card */
.testimonial-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  padding-top: 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid #f1f5f9;
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}

.swiper-slide-active .testimonial-card {
  transform: scale(1);
}

/* Testimonial Content */
.testimonial-content {
  position: relative;
  margin-bottom: 1.5rem;
}

.testimonial-quote {
  color: #014aad;
  font-size: 1.5rem;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.testimonial-text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #475569;
  margin: 0;
  font-style: italic;
}

/* Testimonial Author */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f1f5f9;
}

/* Circular Author Image */
.author-image {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid #f1f5f9;
}

.author-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Author Details */
.author-details {
  flex: 1;
}

.author-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

.author-designation {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* Swiper Container */
.testimonialsSwiper {
  overflow: hidden;
  width: 100%;
  padding: 0px 0 40px;
}

/* Swiper Slide */
.testimonialsSwiper .swiper-slide {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.testimonialsSwiper .swiper-slide-active {
  opacity: 1;
}

/* RESPONSIVE BEHAVIOR:
   Desktop: Full width with side buttons
   Tablet: Reduced padding, smaller buttons
   Mobile: Stacked layout, buttons closer to content
*/

@media (max-width: 1199px) {
  .testimonials-section {
    padding: 70px 0;
  }

  .testimonials-slider-container {
    max-width: 800px;
    padding: 0 60px;
  }

  .testimonial-card {
    padding: 2.25rem;
  }
}

@media (max-width: 991px) {
  /* Tablet */
  .testimonials-section {
    padding: 60px 0;
  }

  .testimonials-slider-container {
    max-width: 700px;
    padding: 0 60px;
  }

  .testimonial-card {
    padding: 2rem;
    min-height: 280px;
  }

  .testimonial-text {
    font-size: 1rem;
  }

  .testimonial-nav-btn {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
}

@media (max-width: 767px) {
  /* Mobile */
  .testimonials-section {
    padding: 50px 0;
  }

  .testimonials-slider-container {
    padding: 0 50px; /* Reduced padding for mobile */
    max-width: 100%;
  }

  .testimonial-card {
    padding: 1.75rem;
    min-height: auto;
  }

  .testimonial-content {
    margin-bottom: 1.25rem;
  }

  .testimonial-text {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .testimonial-author {
    gap: 0.875rem;
  }

  .author-image {
    width: 60px;
    height: 60px;
  }

  .author-name {
    font-size: 1rem;
  }

  .author-designation {
    font-size: 0.85rem;
  }

  .testimonial-nav-btn {
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }
}

@media (max-width: 575px) {
  /* Small Mobile */
  .testimonials-section {
    padding: 40px 0;
  }

  .testimonials-slider-container {
    padding: 0 45px;
  }

  .testimonial-card {
    padding: 1.5rem;
  }

  .testimonial-quote {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .testimonial-text {
    font-size: 0.9rem;
  }

  .testimonial-author {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
    padding-top: 1.25rem;
  }

  .author-image {
    width: 70px;
    height: 70px;
  }

  .author-details {
    text-align: center;
  }

  .testimonial-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
}

/* Accessibility Improvements */
.testimonial-nav-btn:focus {
  outline: 2px solid #014aad;
  outline-offset: 2px;
}

/* Ensure touch-friendly buttons on mobile */
@media (hover: none) and (pointer: coarse) {
  .testimonial-nav-btn {
    width: 44px;
    height: 44px; /* Larger touch target on mobile */
  }
}

/* Print Styles */
@media print {
  .testimonials-slider-container {
    padding: 0 !important;
  }

  .testimonial-nav-btn {
    display: none;
  }

  .swiper-wrapper {
    transform: none !important;
    flex-direction: column;
    gap: 2rem;
  }

  .swiper-slide {
    opacity: 1 !important;
    page-break-inside: avoid;
  }
}

/* ============================================
   CONTACT US SECTION - PROFESSIONAL STYLING
   ============================================ */

/* Section Container */
.contact-section {
  padding: 60px 0;
  background-color: #ffffff;
  position: relative;
}

/* Container */
.contact-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.1rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
}

.section-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(to right, #014aad, #014aad);
  margin: 0 auto 2.5rem;
  border-radius: 2px;
}

/* Contact Container - 2 Column Layout */
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Contact Information Column */
.contact-info-column {
  height: 100%;
}

.contact-info {
  height: 100%;
}

.contact-heading {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
}

.contact-description {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 500px;
}

/* Contact Details List */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Contact Item */
.contact-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

/* Contact Icon */
.contact-icon {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #014aad, #014aad);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  font-size: 1.3rem;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* Contact Content */
.contact-content {
  flex: 1;
}

.contact-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* Contact Links (Email & Phone) */
.contact-link {
  display: block;
  font-size: 1rem;
  color: #475569;
  text-decoration: none;
  margin-bottom: 0.25rem;
  transition: all 0.2s ease;
  line-height: 1.5;
}

.contact-link:hover {
  color: #2563eb;
  text-decoration: solid;
  transform: translateX(2px);
}

/* HOW TO ADD MORE PHONE/EMAIL ENTRIES:
   Simply add another <a> tag with the same class inside contact-content
   The layout will automatically adjust spacing */

/* Contact Text (Address & Hours) */
.contact-text {
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

/* Map Column */
.map-column {
  height: 100%;
}

.map-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.map-heading {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1.5rem;
}

/* Map Wrapper */
.map-wrapper {
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  margin-bottom: 1rem;
  position: relative;
  min-height: 400px; /* Minimum height for map */
}

/* Map Iframe */
.map-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.map-note {
  font-size: 0.95rem;
  color: #64748b;
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* RESPONSIVE BEHAVIOR:
   Desktop: 2 columns side by side
   Tablet: 2 columns with reduced gap
   Mobile: Stack vertically with contact first, map below
*/

/* Tablet */
@media (max-width: 1024px) {
  .contact-section {
    padding: 70px 0;
  }

  .section-title {
    font-size: 2.25rem;
  }

  .contact-container {
    gap: 40px;
  }

  .map-wrapper {
    min-height: 380px;
  }
}

/* Large Mobile / Small Tablet */
@media (max-width: 768px) {
  /* Switch to vertical layout */
  .contact-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-section {
    padding: 60px 0;
  }

  .section-title {
    font-size: 2rem;
  }

  .section-subtitle {
    font-size: 1rem;
  }

  .contact-heading,
  .map-heading {
    font-size: 1.6rem;
  }

  .map-wrapper {
    min-height: 350px;
  }

  .contact-item {
    gap: 1.25rem;
  }

  .contact-icon {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .contact-section {
    padding: 50px 0;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .contact-container {
    gap: 40px;
  }

  .contact-heading,
  .map-heading {
    font-size: 1.4rem;
  }

  .contact-description {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .contact-details {
    gap: 1.75rem;
  }

  .contact-item {
    gap: 1rem;
  }

  .contact-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    border-radius: 10px;
  }

  .contact-label {
    font-size: 1rem;
  }

  .contact-link,
  .contact-text {
    font-size: 0.95rem;
  }

  .map-wrapper {
    min-height: 300px;
    border-radius: 12px;
  }

  .map-note {
    font-size: 0.9rem;
  }
}

/* Small Mobile */
@media (max-width: 400px) {
  .contact-section .container {
    padding: 0 15px;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .contact-item {
    flex-direction: column;
    gap: 0.75rem;
  }

  .contact-icon {
    align-self: flex-start;
  }

  .map-wrapper {
    min-height: 280px;
  }
}

/* Print Styles */
@media print {
  .contact-section {
    padding: 40px 0;
  }

  .map-wrapper {
    display: none; /* Hide map when printing */
  }

  .contact-container {
    grid-template-columns: 1fr;
  }

  .contact-link {
    color: #000000;
    text-decoration: none;
  }
}

/* Accessibility */
.contact-link:focus,
.map-iframe:focus {
  outline: 2px solid #014aad;
  outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .contact-link:hover {
    transform: none;
  }
}

/* ============================================
   CONTACT FORM SECTION - PROFESSIONAL STYLING
   ============================================ */

/* Section Container */
.contact-form-section {
  padding: 60px 0;
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

/* Container */
.contact-form-section .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Form Header */
.form-header {
  text-align: center;
  margin-bottom: 50px;
}

.form-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.form-subtitle {
  font-size: 1.1rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
}

.form-divider {
  width: 70px;
  height: 3px;
  background: linear-gradient(to right, #014aad, #8b5cf6);
  margin: 0 auto;
  border-radius: 2px;
}

/* Form Container */
.inquiry-form {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

/* Form Grid Layout */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

/* Form Group */
.form-group {
  display: flex;
  flex-direction: column;
}

/* Full-width elements (message textarea) */
.form-group.full-width {
  grid-column: 1 / -1; /* Span both columns */
}

/* Form Labels */
.form-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.5rem;
  display: block;
  line-height: 1.4;
}

.required {
  color: #ef4444;
  font-weight: 600;
}

/* Common Input Styles */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  color: #1e293b;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.5;
}

/* Focus States */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #014aad;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Placeholder Styling */
.form-input::placeholder,
.form-textarea::placeholder {
  color: #94a3b8;
  opacity: 0.8;
}

/* Specific Styles for Select Dropdown */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px;
  cursor: pointer;
}

/* Textarea Specific */
.form-textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 300px;
}

/* Submit Container */
.form-submit-container {
  text-align: center; /* Desktop alignment */
}

/* Submit Button */
.submit-btn {
  padding: 16px 40px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #014aad 0%, #2563eb 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
  display: inline-block;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

.submit-btn:active {
  transform: translateY(0);
}

.submit-btn:focus {
  outline: 2px solid #014aad;
  outline-offset: 2px;
}

/* Form Note */
.form-note {
  font-size: 0.9rem;
  color: #64748b;
  margin-top: 1rem;
  line-height: 1.5;
}

.form-note a {
  color: #014aad;
  text-decoration: none;
  font-weight: 500;
}

.form-note a:hover {
  text-decoration: underline;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* RESPONSIVE BEHAVIOR:
   - Desktop: 2-column grid, right-aligned button
   - Tablet: 2-column with reduced gap
   - Mobile: Single column, centered full-width button */

/* Tablet */
@media (max-width: 1024px) {
  .contact-form-section {
    padding: 70px 0;
  }

  .form-title {
    font-size: 2rem;
  }

  .form-subtitle {
    font-size: 1.05rem;
  }

  .inquiry-form {
    padding: 35px;
  }

  .form-grid {
    gap: 25px;
  }
}

/* Large Mobile / Small Tablet */
@media (max-width: 768px) {
  .contact-form-section {
    padding: 60px 0;
  }

  .form-title {
    font-size: 1.75rem;
  }

  .inquiry-form {
    padding: 30px;
  }

  .form-grid {
    gap: 20px;
  }
}

/* Mobile (Switch to single column) */
@media (max-width: 600px) {
  .contact-form-section .container {
    padding: 0 15px;
  }

  .form-header {
    margin-bottom: 40px;
  }

  .form-title {
    font-size: 1.6rem;
  }

  .form-subtitle {
    font-size: 1rem;
    padding: 0 10px;
  }

  .inquiry-form {
    padding: 25px 20px;
  }

  /* Switch to single column layout */
  .form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Center align button on mobile */
  .form-submit-container {
    text-align: center;
  }

  /* Full-width button on mobile */
  .submit-btn {
    width: 100%;
    max-width: 300px;
    padding: 16px 30px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    padding: 16px; /* Larger tap targets on mobile */
  }

  .form-note {
    font-size: 0.85rem;
    text-align: center;
    padding: 0 10px;
  }
}

/* Small Mobile */
@media (max-width: 400px) {
  .contact-form-section {
    padding: 50px 0;
  }

  .form-title {
    font-size: 1.5rem;
  }

  .form-subtitle {
    font-size: 0.95rem;
  }

  .inquiry-form {
    padding: 20px 15px;
  }

  .form-label {
    font-size: 0.9rem;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 0.95rem;
    padding: 15px;
  }

  .submit-btn {
    font-size: 1rem;
    padding: 15px 25px;
  }
}

/* Accessibility Enhancements */
.form-input:invalid:not(:placeholder-shown),
.form-select:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
}

.form-input:valid:not(:placeholder-shown),
.form-select:valid:not(:placeholder-shown),
.form-textarea:valid:not(:placeholder-shown) {
  border-color: #10b981;
}

/* Disabled state */
.submit-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.7;
}

/* Print Styles */
@media print {
  .contact-form-section {
    padding: 40px 0;
    background: none;
    border: none;
  }

  .inquiry-form {
    box-shadow: none;
    border: 1px solid #000000;
    padding: 30px;
  }

  .submit-btn {
    background: #000000;
    color: #ffffff;
    box-shadow: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .form-input,
  .form-select,
  .form-textarea,
  .submit-btn {
    transition: none;
  }

  .submit-btn:hover {
    transform: none;
  }
}

/* ========================================
            ERP SERVICE DETAIL PAGE - SCOPED STYLES
            ======================================== */

/* Hero Section */
.erp-hero {
  background: linear-gradient(135deg, #195292 0%, #2471b9 100%);
  color: #ffffff;
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}

.erp-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="2" height="2" fill="rgba(255,255,255,0.05)"/></svg>');
  background-size: 50px 50px;
}

.erp-hero-content {
  position: relative;
  z-index: 1;
}

.erp-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.erp-hero-tagline {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.95;
  font-weight: 300;
}

.erp-usp-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.erp-usp-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.erp-usp-item i {
  font-size: 1.5rem;
  margin-right: 1rem;
  color: #ffd700;
}

.erp-btn-primary {
  background-color: #195292;
  color: #ffffff;
  padding: 14px 35px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  margin-right: 15px;
  margin-bottom: 10px;
}

.erp-btn-primary:hover {
  background-color: #1a477a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.erp-btn-secondary {
  background-color: transparent;
  color: #ffffff;
  padding: 14px 35px;
  border: 2px solid #ffffff;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  margin-bottom: 10px;
}

.erp-btn-secondary:hover {
  background-color: #ffffff;
  color: #195292;
  transform: translateY(-2px);
}

/* Partner Section */
.erp-partner {
  background-color: #f8f9fa;
  padding: 40px 0;
  border-bottom: 1px solid #e0e0e0;
}

.erp-partner-content {
  text-align: center;
}

.erp-partner-badge {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  padding: 20px 40px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.erp-partner-badge i {
  font-size: 2.5rem;
  color: #195292;
  margin-right: 20px;
}

.erp-partner-text h3 {
  font-size: 1.5rem;
  color: #195292;
  margin: 0 0 5px 0;
  font-weight: 700;
}

.erp-partner-text p {
  margin: 0;
  color: #666;
  font-size: 0.95rem;
}

/* Overview Section */
.erp-overview {
  padding: 60px 0;
}

.erp-section-title {
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.erp-section-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 2rem;
}

.erp-overview-slider {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.erp-overview-slider img {
  width: 100%;
  height: auto;
  display: block;
}

.swiper-button-next,
.swiper-button-prev {
  color: #195292;
  background: rgba(255, 255, 255, 0.9);
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px;
  font-weight: 700;
}

.swiper-pagination-bullet-active {
  background-color: #195292;
}

/* Features Section */
.erp-features {
  background-color: #f8f9fa;
  padding: 60px 0;
}

.erp-feature-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 35px 25px;
  text-align: center;
  transition: all 0.3s ease;
  /* height: 100%; */
  border: 1px solid #e0e0e0;
  margin-bottom: 30px;
}

.erp-feature-card:hover {
  box-shadow: 0 10px 30px rgba(25, 82, 146, 0.15);
  transform: translateY(-5px);
  border-color: #195292;
}

.erp-feature-icon {
  font-size: 3rem;
  color: #195292;
  margin-bottom: 1.5rem;
}

.erp-feature-card h4 {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 1rem;
  font-weight: 600;
}

.erp-feature-card p {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

/* Industries Section */
.erp-industries {
  padding: 60px 0;
}

.erp-industry-card {
  text-align: center;
  padding: 25px 15px;
  margin-bottom: 20px;
  transition: all 0.3s ease;

  box-shadow:
    rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.erp-industry-card:hover {
  transform: scale(1.05);
}

.erp-industry-icon {
  font-size: 2.5rem;
  color: #195292;
  margin-bottom: 1rem;
}

.erp-industry-icon img {
  width: 100%;
  height: 80px;
  border-radius: 10px;
}

.erp-industry-card h5 {
  font-size: 1.1rem;
  color: #333;
  font-weight: 600;
  margin: 0;
}

/* Why Choose Section */
.erp-why-choose {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 60px 0;
}

.erp-benefit-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  border-left: 4px solid #195292;
  transition: all 0.3s ease;
}

.erp-benefit-item:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transform: translateX(5px);
}

.erp-benefit-icon {
  font-size: 2rem;
  color: #195292;
  margin-right: 20px;
  flex-shrink: 0;
}

.erp-benefit-text h5 {
  font-size: 1.15rem;
  color: #333;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.erp-benefit-text p {
  font-size: 0.95rem;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

/* Process Section */
.erp-process {
  padding: 60px 0;
}

.erp-process-step {
  position: relative;
  padding: 30px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.erp-process-step:hover {
  box-shadow: 0 10px 35px rgba(25, 82, 146, 0.15);
  transform: translateY(-3px);
}

.erp-step-number {
  position: absolute;
  top: -20px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: #195292;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(25, 82, 146, 0.3);
}

.erp-process-step h4 {
  margin-top: 15px;
  margin-bottom: 1rem;
  color: #0f172a;
  font-weight: 600;
}

.erp-process-step p {
  color: #666;
  margin: 0;
  line-height: 1.6;
}

/* FAQ Section */
.erp-faq {
  background-color: #f8f9fa;
  padding: 60px 0;
}

.erp-faq-item {
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
}

.erp-faq-question {
  padding: 20px 25px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  font-weight: 600;
  color: #333;
}

.erp-faq-question:hover {
  background-color: #f8f9fa;
  color: #195292;
}

.erp-faq-question i {
  transition: transform 0.3s ease;
  color: #195292;
}

.erp-faq-item.active .erp-faq-question i {
  transform: rotate(180deg);
}

.erp-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.erp-faq-item.active .erp-faq-answer {
  max-height: 500px;
}

.erp-faq-answer-content {
  padding: 0 25px 20px 25px;
  color: #666;
  line-height: 1.7;
}

/* Final CTA Section */
.erp-final-cta {
  background: linear-gradient(135deg, #195292 0%, #2471b9 100%);
  color: #ffffff;
  padding: 60px 0;
  text-align: center;
}

.erp-final-cta h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.erp-final-cta p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.95;
}

/* Sliding Contact Form */
.erp-contact-trigger {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #f26e3f 0%, #da5728 100%);
  color: #ffffff;
  padding: 12px 8px;
  border: none;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  z-index: 1000;
  font-weight: 500;
  font-size: 1rem;
  /* box-shadow: -3px 0 15px rgba(25, 82, 146, 0.4); */
  transition: all 0.3s ease;
  /* animation: pulseButton 2s infinite; */
  writing-mode: sideways-rl;
  text-orientation: mixed;
  letter-spacing: 1px;
}

.erp-contact-trigger:hover {
  padding-right: 12px;
  box-shadow: -5px 0 15px rgba(25, 82, 146, 0.411);
  background: linear-gradient(135deg, #da5728 0%, #f26e3f 100%);
}

.erp-contact-trigger i {
  font-size: 1.2rem;
  margin-bottom: 8px;
  display: inline-block;
  animation: bounce 2s infinite;
}

@keyframes pulseButton {
  0%,
  100% {
    box-shadow: -3px 0 10px rgba(25, 82, 146, 0.4);
  }

  50% {
    box-shadow: -4px 0 12px rgba(25, 82, 146, 0.7);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(-5px);
  }

  60% {
    transform: translateX(-3px);
  }
}

.erp-form-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
}

.erp-form-overlay.active {
  opacity: 1;
  visibility: visible;
}

.erp-sliding-form {
  position: fixed;
  top: 0;
  right: -500px;
  width: 100%;
  max-width: 500px;
  height: 100%;
  background: #ffffff;
  z-index: 1002;
  transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3); */
  overflow-y: auto;
}

.erp-sliding-form.active {
  right: 0;
}

.erp-form-header {
  background: linear-gradient(135deg, #f26e3f 0%, #da5728 100%);
  color: #ffffff;
  padding: 25px 30px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.erp-form-header h3 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
}

.erp-form-header p {
  margin: 5px 0 0 0;
  opacity: 0.9;
  font-size: 0.95rem;
  color: #ffffff;
}

.erp-form-close {
  position: absolute;
  top: 15px;
  right: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.erp-form-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.erp-form-content {
  padding: 35px 30px;
}

.erp-form-group {
  margin-bottom: 25px;
}

.erp-form-label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 600;
  font-size: 0.95rem;
}

.erp-form-label span {
  color: #d9534f;
}

.erp-form-input,
.erp-form-select,
.erp-form-textarea {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  font-family: inherit;
}

.erp-form-input:focus,
.erp-form-select:focus,
.erp-form-textarea:focus {
  outline: none;
  border-color: #195292;
  box-shadow: 0 0 0 3px rgba(25, 82, 146, 0.1);
}

.erp-form-textarea {
  min-height: 120px;
  resize: vertical;
}

.erp-form-submit {
  width: 100%;
  background: linear-gradient(135deg, #f26e3f 0%, #da5728 100%);
  color: #ffffff;
  padding: 15px;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.erp-form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(25, 82, 146, 0.3);
}

.erp-form-submit:active {
  transform: translateY(0);
}

.erp-form-info {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-top: 25px;
  border-left: 4px solid #014aad;
}

.erp-form-info h5 {
  color: #014aad;
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.erp-form-info-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #666;
  font-size: 0.95rem;
}

.erp-form-info-item:last-child {
  margin-bottom: 0;
}

.erp-form-info-item i {
  color: #014aad;
  margin-right: 12px;
  font-size: 1.1rem;
  width: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .erp-sliding-form {
    max-width: 100%;
    right: -100%;
  }

  .erp-form-content {
    padding: 25px 20px;
  }

  .erp-form-header {
    padding: 20px;
  }

  .erp-form-close {
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
  }

  .erp-contact-trigger {
    font-size: 0.9rem;
    padding: 12px 8px;
  }

  .erp-contact-trigger i {
    font-size: 1rem;
  }

  .erp-hero h1 {
    font-size: 2rem;
  }

  .erp-hero-tagline {
    font-size: 1.1rem;
  }

  .erp-section-title {
    font-size: 2rem;
  }

  .erp-overview {
    padding: 50px 0;
  }

  .erp-features,
  .erp-industries,
  .erp-why-choose,
  .erp-process,
  .erp-faq,
  .erp-final-cta {
    padding: 50px 0;
  }

  .erp-btn-primary,
  .erp-btn-secondary {
    display: block;
    width: 100%;
    margin: 10px 0;
    text-align: center;
  }

  .erp-overview-slider {
    margin-top: 30px;
  }
}

@media (max-width: 576px) {
  .erp-hero {
    padding: 50px 0 40px;
  }

  .erp-partner-badge {
    flex-direction: column;
    text-align: center;
  }

  .erp-partner-badge i {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .erp-benefit-item {
    flex-direction: column;
    text-align: center;
  }

  .erp-benefit-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

.erp-form-textarea.error {
  border-color: #f44336 !important;
}

.erp-form-content .word-counter {
  text-align: right;
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.erp-form-content .word-counter.success {
  color: #4caf50;
}

.erp-form-content .word-counter.warning {
  color: #ff9800;
}

.erp-form-content .word-counter.error {
  color: #f44336;
  font-weight: bold;
}

.erp-form-content .terms-checkbox {
  margin: 15px 0;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
}

.erp-form-content .terms-checkbox input[type="checkbox"] {
  margin-right: 8px;
}

/* ========================================
   ERP SERVICES TABLE - SCOPED STYLES
   ======================================== */

.erp-services-table-section {
  background-color: #f8f9fa;
  padding: 60px 0;
  border-top: 1px solid #e0e0e0;
}

.erp-services-table-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1rem;
  line-height: 1.2;
  text-align: center;
}

.erp-services-table-subtitle {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 2rem;
  text-align: center;
}

.erp-services-table-wrapper {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.erp-services-table {
  margin-bottom: 0;
}

.erp-services-table thead th {
  background-color: #195292;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  padding: 18px 20px;
  border: none;
}

.erp-services-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

.erp-services-table tbody tr {
  transition: all 0.3s ease;
}

.erp-services-table tbody tr:hover {
  background-color: #e9f2fb;
  transform: scale(1.01);
}

.erp-services-table tbody td {
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid #e9ecef;
  vertical-align: middle;
}

.erp-services-table tbody tr:last-child td {
  border-bottom: none;
}

.erp-service-name {
  font-weight: 600;
  color: #333;
  font-size: 1rem;
}

.erp-service-availability {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #28a745;
}

.erp-service-availability i {
  font-size: 1.2rem;
  margin-right: 8px;
}

.erp-service-availability span {
  font-weight: 500;
  font-size: 0.95rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .erp-services-table-section {
    padding: 40px 0;
  }

  .erp-services-table-title {
    font-size: 1.6rem;
  }

  .erp-services-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .erp-services-table {
    min-width: 500px;
  }

  .erp-services-table thead th {
    padding: 14px 15px;
    font-size: 0.85rem;
  }

  .erp-services-table tbody td {
    padding: 12px 15px;
  }

  .erp-service-name {
    font-size: 0.95rem;
  }

  .erp-service-availability i {
    font-size: 1.1rem;
  }

  .erp-service-availability span {
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  .erp-services-table-title {
    font-size: 1.4rem;
  }

  .erp-services-table-subtitle {
    font-size: 0.9rem;
    margin-bottom: 2rem;
  }
}

/* Blog Page Start */

/* ========================================
   BLOG LISTING SECTION STYLES
   Scoped to #blog-listing-section
   Professional, Clean, Corporate Design
   ========================================= */

/* Import Professional Font */

/* ========================================
   SECTION HEADER
   ========================================= */

/* #blog-listing-section .section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

#blog-listing-section .section-subtitle {
  font-size: 1.125rem;
  color: #6b7280;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
} */

/* ========================================
   BLOG CARD CONTAINER
   Equal Height Cards with Flexbox
   ========================================= */

#blog-listing-section .blog-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* 
       RESPONSIVE NOTE:
       Using flexbox ensures all cards have equal height
       Cards will stretch to match the tallest card in the row
    */
}

#blog-listing-section .blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ========================================
   BLOG CARD IMAGE
   Responsive Image with Hover Zoom Effect
   ========================================= */

#blog-listing-section .blog-card-image {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: #f3f4f6;
  /* 
       RESPONSIVE NOTE:
       Fixed height ensures consistent image area
       Overflow hidden enables smooth zoom effect
    */
}

#blog-listing-section .blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  /* 
       object-fit: cover ensures images fill the container
       without distortion on any screen size
    */
}

#blog-listing-section .blog-card:hover .blog-card-image img {
  transform: scale(1.08);
  /* Subtle zoom on hover - professional, not flashy */
}

#blog-listing-section .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

#blog-listing-section .blog-card:hover .image-overlay {
  opacity: 1;
}

/* ========================================
   BLOG CARD CONTENT
   ========================================= */

#blog-listing-section .blog-card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* 
       flex-grow: 1 pushes the "Read More" button to bottom
       creating consistent spacing across all cards
    */
}

/* ========================================
   BLOG META (Date with Icon)
   ========================================= */

#blog-listing-section .blog-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #6b7280;
}

#blog-listing-section .blog-meta i {
  color: #014aad;
  font-size: 0.875rem;
}

#blog-listing-section .blog-date {
  font-weight: 500;
}

/* ========================================
   BLOG TITLE
   Max 2 Lines with Ellipsis
   ========================================= */

#blog-listing-section .blog-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.875rem;
  line-height: 1.4;
  /* 
       Line Clamp for 2 Lines Maximum
       Ensures consistent card heights
    */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 3.5rem; /* Ensures space for 2 lines */
}

/* ========================================
   BLOG EXCERPT
   2-3 Lines with Ellipsis
   ========================================= */

#blog-listing-section .blog-excerpt {
  font-size: 0.9375rem;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  flex-grow: 1;
  /* 
       Line Clamp for 3 Lines Maximum
       flex-grow: 1 ensures content area expands
    */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================
   READ MORE BUTTON/LINK
   Positioned at Bottom of Card
   ========================================= */

#blog-listing-section .blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #014aad;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: auto;
  /* margin-top: auto pushes button to bottom */
}

#blog-listing-section .blog-read-more:hover {
  color: #2563eb;
  gap: 0.75rem;
  /* Arrow moves on hover - subtle interaction */
}

#blog-listing-section .blog-read-more i {
  font-size: 0.875rem;
  transition: transform 0.3s ease;
}

#blog-listing-section .blog-read-more:hover i {
  transform: translateX(4px);
}

/* ========================================
   RESPONSIVE DESIGN
   Mobile First Approach
   ========================================= */

/* 
   MOBILE (Default - Single Column)
   Bootstrap: col-12
   Cards stack vertically on mobile
*/

/* TABLET (768px and up) */
@media (min-width: 768px) {
  /* #blog-listing-section .section-title {
    font-size: 2.75rem;
  } */

  #blog-listing-section .blog-card-image {
    height: 200px;
    /* Slightly shorter images on tablet for better proportions */
  }

  /* 
       Bootstrap: col-md-6
       2 cards per row on tablet
       Cards remain equal height within rows
    */
}

/* DESKTOP (992px and up) */
@media (min-width: 992px) {
  /* #blog-listing-section .section-title {
    font-size: 3rem;
  } */

  #blog-listing-section .blog-card-image {
    height: 220px;
    /* Full height images on desktop */
  }

  #blog-listing-section .blog-title {
    font-size: 1.3125rem;
    /* Slightly larger titles on desktop */
  }

  /* 
       Bootstrap: col-lg-3
       4 cards per row on desktop
       Grid layout: 25% width each card
    */
}

/* LARGE DESKTOP (1200px and up) */
@media (min-width: 1200px) {
  #blog-listing-section .blog-card-image {
    height: 240px;
    /* Taller images on large screens */
  }
}

/* ========================================
   ACCESSIBILITY & FOCUS STATES
   ========================================= */

#blog-listing-section .blog-read-more:focus {
  outline: 2px solid #014aad;
  outline-offset: 4px;
  border-radius: 4px;
}

#blog-listing-section .blog-card:focus-within {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ========================================
   PRINT STYLES
   Clean Print Layout
   ========================================= */

@media print {
  #blog-listing-section .blog-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #e5e7eb;
  }

  #blog-listing-section .blog-card:hover {
    transform: none;
  }
}

/* ========================================
   LOADING STATE (Optional)
   For Dynamic Content Loading
   ========================================= */

#blog-listing-section .blog-card.loading {
  pointer-events: none;
  opacity: 0.6;
}

#blog-listing-section .blog-card.loading .blog-card-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ========================================
   END OF BLOG LISTING SECTION STYLES
   ========================================= */

/* Blog Page End  */

/* Web Dev Start  */

/* Web Dev End  */

/* ============================================
   FLOATING SOCIAL MEDIA HUB
   Fixed at bottom-left corner, expands smoothly
   ============================================ */

/* Main Container */
.social-hub {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Toggle Button - Main Circle */
.social-hub-toggle {
  width: 60px;
  height: 60px;
  background: #f26e3f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.social-hub-toggle i {
  color: white;
  font-size: 1.8rem;
  transition: all 0.3s ease;
  position: absolute;
}

.social-hub-toggle i:first-child {
  opacity: 1;
  transform: rotate(0deg);
}

.social-hub-toggle i:last-child {
  opacity: 0;
  transform: rotate(90deg);
}

/* Active State - Toggle Button */
.social-hub.active .social-hub-toggle {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
  transform: rotate(180deg);
}

.social-hub.active .social-hub-toggle i:first-child {
  opacity: 0;
  transform: rotate(-90deg);
}

.social-hub.active .social-hub-toggle i:last-child {
  opacity: 1;
  transform: rotate(0deg);
}

/* Social Links Container */
.social-links {
  position: absolute;
  bottom: 70px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-hub.active .social-links {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

/* Individual Social Link */
.social-link {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  font-size: 1.2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  animation: slideIn 0.4s ease backwards;
}

/* Stagger Animation */
.social-link:nth-child(1) {
  animation-delay: 0.05s;
}
.social-link:nth-child(2) {
  animation-delay: 0.1s;
}
.social-link:nth-child(3) {
  animation-delay: 0.15s;
}
.social-link:nth-child(4) {
  animation-delay: 0.2s;
}
.social-link:nth-child(5) {
  animation-delay: 0.25s;
}
.social-link:nth-child(6) {
  animation-delay: 0.3s;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Individual Brand Colors */
.social-link.facebook {
  background: #1877f2;
}
.social-link.twitter {
  background: #1da1f2;
}
.social-link.instagram {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}
.social-link.linkedin {
  background: #0077b5;
}
.social-link.youtube {
  background: #ff0000;
}
.social-link.whatsapp {
  background: #25d366;
}

/* Hover Effects */
.social-link:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.social-link.facebook:hover {
  background: #166fe5;
}
.social-link.twitter:hover {
  background: #1a91da;
}
.social-link.instagram:hover {
  filter: brightness(1.1);
}
.social-link.linkedin:hover {
  background: #0066a0;
}
.social-link.youtube:hover {
  background: #e60000;
}
.social-link.whatsapp:hover {
  background: #20ba5e;
}

/* Tooltip */
.social-tooltip {
  position: absolute;
  left: 70px;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(4px);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-link:hover .social-tooltip {
  opacity: 1;
  visibility: visible;
  left: 60px;
}

/* Pulse Animation */
.social-hub-toggle {
  animation: socialmediapulse 2s infinite;
}

@keyframes socialmediapulse {
  0% {
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 8px 35px rgba(59, 130, 246, 0.7);
  }
  100% {
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  }
}

.social-hub.active .social-hub-toggle {
  animation: none;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
  .social-hub {
    bottom: 20px;
    left: 20px;
  }

  .social-hub-toggle {
    width: 55px;
    height: 55px;
  }

  .social-hub-toggle i {
    font-size: 1.6rem;
  }

  .social-link {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }

  .social-tooltip {
    left: 60px;
    font-size: 0.75rem;
    padding: 5px 10px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .social-hub {
    bottom: 15px;
    left: 15px;
  }

  .social-hub-toggle {
    width: 50px;
    height: 50px;
  }

  .social-hub-toggle i {
    font-size: 1.4rem;
  }

  .social-links {
    bottom: 60px;
    gap: 12px;
  }

  .social-link {
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }

  .social-tooltip {
    display: none; /* Hide tooltips on very small screens */
  }
}

/* Extra Small Mobile */
@media (max-width: 375px) {
  .social-hub {
    bottom: 10px;
    left: 10px;
  }

  .social-hub-toggle {
    width: 45px;
    height: 45px;
  }

  .social-hub-toggle i {
    font-size: 1.2rem;
  }

  .social-link {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }
}

/* ============================================
   ALTERNATIVE: RADIAL LAYOUT (OPTIONAL)
   Uncomment this section for a radial fan-out effect
   ============================================ */

/*
.social-hub.radial .social-links {
    flex-direction: row;
    bottom: 0;
    left: 70px;
    gap: 20px;
}

.social-hub.radial.active .social-links {
    transform: translateX(0);
}

.social-hub.radial .social-link {
    animation: slideInRight 0.4s ease backwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.social-hub.radial .social-tooltip {
    left: 50%;
    transform: translateX(-50%);
    bottom: 60px;
    top: auto;
}

.social-hub.radial .social-link:hover .social-tooltip {
    left: 50%;
    bottom: 50px;
}
*/

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
  .social-hub-toggle {
    border-color: rgba(255, 255, 255, 0.5);
  }

  .social-tooltip {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .social-hub-toggle,
  .social-link,
  .social-links,
  .social-tooltip {
    animation: none;
    transition: none;
  }

  .social-hub-toggle {
    animation: none;
  }

  .social-link:hover {
    transform: none;
  }
}