/* Professional 3D Political Survey Design */

:root {
  /* Light Multicolor Palette */
  --primary: #4361ee;
  --primary-light: #4895ef;
  --secondary: #7209b7;
  --accent: #f72585;
  --success: #4cc9f0;
  --warning: #fca311;

  /* Backgrounds */
  --bg-body: #f8f9fa;
  --bg-glass: rgba(255, 255, 255, 0.7);
  --bg-card: rgba(255, 255, 255, 0.9);

  /* Text */
  --text-main: #2b2d42;
  --text-muted: #8d99ae;
  --text-light: #ffffff;

  /* 3D & Glass Effects */
  --glass-border: 1px solid rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --card-shadow:
    0 10px 20px rgba(0, 0, 0, 0.05),
    0 6px 6px rgba(0, 0, 0, 0.05),
    0 0 100px -10px var(--primary-light);
  --hover-transform: translateY(-10px) scale(1.02);
  --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  background-color: var(--bg-body);
  color: var(--text-main);
  overflow-x: hidden;
}

/* Background Mesh Gradient */
.mesh-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 50%, rgba(67, 97, 238, 0.25), transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(114, 9, 183, 0.25), transparent 25%),
    radial-gradient(circle at 50% 80%, rgba(76, 201, 240, 0.25), transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(255, 159, 67, 0.15), transparent 40%),
    /* Light Orange */
    radial-gradient(circle at 20% 20%, rgba(46, 204, 113, 0.15), transparent 30%);
  /* Green */
  filter: blur(60px);
  animation: bgShift 20s ease-in-out infinite alternate;
}

@keyframes bgShift {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

/* Premium Section Badge */
.section-badge {
  background: rgba(67, 97, 238, 0.1);
  /* light primary bg */
  color: var(--primary);
  font-size: 0.95rem;
  /* Increased from default small badge size */
  padding: 0.6rem 1.25rem;
  border-radius: 50px;
  font-weight: 800;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: 1px solid rgba(67, 97, 238, 0.15);
  box-shadow: 0 4px 10px rgba(67, 97, 238, 0.05);
}

.display-4 {
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 30px rgba(67, 97, 238, 0.2);
}

/* Navbar Glassmorphism */
.navbar {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding: 1.2rem 0;
  transition: var(--transition);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 0.8rem 0;
}

.navbar-brand {
  font-weight: 800;
  color: var(--text-main) !important;
  font-size: 1.75rem;
  letter-spacing: -0.5px;
}

.navbar-brand img {
  height: 45px;
  /* Optimizing logo size */
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.nav-link {
  color: var(--text-main) !important;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.5rem 1rem !important;
  margin: 0 0.2rem;
  border-radius: 8px;
  /* Softer radius than pill */
  transition: all 0.3s ease;
  position: relative;
}

/* Hover Effect: Subtle Glow & Color Text */
.nav-link:hover,
.nav-link.active {
  color: var(--primary) !important;
  background: rgba(67, 97, 238, 0.08);
  transform: translateY(-1px);
}

/* Optional: Underline effect
.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0px;
  left: 50%;
  background: var(--primary);
  transition: var(--transition);
  transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 80%;
} 
*/

/* Mobile Toggler */
.navbar-toggler {
  border: none;
  background: rgba(67, 97, 238, 0.1);
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  transition: var(--transition);
}

.navbar-toggler:focus {
  box-shadow: none;
  background: rgba(67, 97, 238, 0.2);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(67, 97, 238, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile Menu Dropdown */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }

  .nav-link {
    padding: 0.8rem 1rem !important;
    border-radius: 8px;
  }

  .nav-link.active,
  .nav-link:hover {
    background: rgba(67, 97, 238, 0.1);
  }
}

/* Hero Section */
.hero-section {
  padding: 8rem 0 5rem;
  position: relative;
  perspective: 1000px;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-3d-image {
  transform-style: preserve-3d;
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
}

@keyframes float {
  0% {
    transform: translateY(0px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: translateY(-20px) rotateX(2deg) rotateY(-2deg);
  }

  100% {
    transform: translateY(0px) rotateX(0deg) rotateY(0deg);
  }
}

/* 3D Cards */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--glass-border);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: var(--glass-shadow);
  transition: var(--transition);
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  opacity: 0;
  transition: var(--transition);
}

.glass-card:hover {
  transform: var(--hover-transform);
  box-shadow: var(--card-shadow);
  z-index: 2;
}

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

/* Buttons */
.btn {
  border-radius: 50px;
  padding: 0.8rem 2rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  box-shadow: 0 10px 20px rgba(67, 97, 238, 0.3);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(67, 97, 238, 0.4);
}

.btn-outline-primary {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-outline-primary:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(67, 97, 238, 0.2);
}

/* Stats Cards */
.stats-card {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.stats-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  height: 80px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #fff, #f0f2f5);
  box-shadow:
    5px 5px 10px rgba(0, 0, 0, 0.05),
    -5px -5px 10px rgba(255, 255, 255, 0.8);
  color: var(--primary);
  transition: var(--transition);
}

/* Icon 3D Container */
.icon-3d {
  width: 64px;
  height: 64px;
  background: white;
  border-radius: 16px;
  /* Soft square/squircle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--primary);
  box-shadow: 0 10px 25px rgba(67, 97, 238, 0.15);
  /* Soft colored shadow */
  transition: var(--transition);
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Subtle gradient overlay on hover */
.icon-3d::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  opacity: 0;
  transition: var(--transition);
  z-index: -1;
  border-radius: 16px;
}

.service-slide-card:hover .icon-3d,
.glass-card:hover .icon-3d,
.icon-3d:hover {
  transform: translateY(-5px) rotate(5deg);
  color: white;
  box-shadow: 0 15px 35px rgba(67, 97, 238, 0.3);
}

.service-slide-card:hover .icon-3d::after,
.glass-card:hover .icon-3d::after,
.icon-3d:hover::after {
  opacity: 1;
}


/* Footer */
footer {
  background: white;
  padding-top: 5rem;
  padding-bottom: 2rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05);
}

.footer-brand {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
  display: block;
}

/* Loader */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-hidden {
  opacity: 0;
  visibility: hidden;
}

.loader {
  width: 60px;
  height: 60px;
  border: 5px solid rgba(67, 97, 238, 0.1);
  border-top: 5px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  box-shadow: 0 0 20px rgba(67, 97, 238, 0.2);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-section {
    padding: 10rem 0 4rem;
    text-align: center;
  }

  .hero-3d-image {
    margin-top: 3rem;
    max-width: 80%;
  }

  .display-4 {
    font-size: 2.5rem;
  }
}

/* Map Styles */
#india-map-obj {
  transition: all 0.5s ease;
}

/* We need to target the SVG content via JS or if inline, but since it's an object,
   we might need to rely on JS to inject styles or use the inline styles in SVG.
   However, we can add a class for the container animation. */

.pop-animation {
  animation: pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center;
  fill: var(--primary) !important;
  filter: drop-shadow(0 5px 15px rgba(67, 97, 238, 0.4));
}

@keyframes pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* Utility Animations */
.animate-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

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

.text-gradient {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.pointer-events-none {
  pointer-events: none;
}

/* Marquee Animation */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 2rem 0;
}

.marquee-content {
  display: inline-block;
  animation: marquee 30s linear infinite;
  padding-left: 100%;
  /* Start off-screen */
}

/* For infinite loop sensation without gap, we usually duplicate content or use two sets.
   A simpler approach for this task: standard marquee */
/* Services Marquee Section */
.service-marquee-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 2rem 0;
}

.service-marquee-container {
  width: 100%;
  overflow: hidden;
}

.service-marquee-content {
  display: flex;
  width: fit-content;
  animation: marquee-scroll 40s linear infinite;
  padding-left: 2rem;
  /* Initial offset */
}

/* Pause animation on hover for better UX */
.service-marquee-content:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
    /* Assumes content is duplicated once */
  }
}

/* Service Slide Card */
.service-slide-card {
  width: 320px;
  flex-shrink: 0;
  margin-right: 2rem;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-slide-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-slide-card .card-body {
  padding: 2rem;
  position: relative;
  z-index: 2;
  background: white;
}

.service-slide-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(67, 97, 238, 0.2);
  z-index: 10;
}

.service-slide-card:hover img {
  transform: scale(1.1);
}

/* Gradient line on top of card */
/* Gradient line on top of card */
.service-slide-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  z-index: 3;
}


/* Infinite Scroll Marquee (Seamless) */
.logos-slider {
  overflow: hidden;
  padding: 30px 0;
  background: white;
  white-space: nowrap;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border-radius: 100px;
}

.logos-slider:before,
.logos-slider:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos-slider:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos-slider:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.logos-slide {
  display: inline-block;
  animation: 20s slide infinite linear;
}

.logos-slide img {
  height: 80px;
  margin: 0 40px;
  transition: all 0.3s ease;
}

.logos-slide img:hover {
  transform: scale(1.1);
}

@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* Utility Classes */
.opacity-10 {
  opacity: 0.1 !important;
}

/* Feature Items */
.feature-item {
  display: flex;
  align-items: center;
  /* Centered alignment */
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: white;
  border-radius: 20px;
  transition: var(--transition);
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.feature-item:hover {
  transform: translateY(-5px) translateX(5px);
  box-shadow: 0 20px 40px rgba(67, 97, 238, 0.1);
  border-color: rgba(67, 97, 238, 0.2);
}

.feature-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
  font-size: 1.5rem;
  background: white;
  color: var(--primary);
  transition: var(--transition);
  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.15);
  /* Premium shadow */
  border: 1px solid rgba(67, 97, 238, 0.1);
}

.feature-item:hover .feature-icon {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 10px 25px rgba(67, 97, 238, 0.3);
  border-color: transparent;
}

/* Updated Stats Cards for Grid */
.stats-grid-card {
  background: white;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stats-grid-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-light);
}

.stats-grid-card h3 {
  font-size: 2.5rem;
}

.gallery-card:hover img {
  transform: scale(1.1);
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}


/* Infinite Scroll Marquee (Seamless) */
.logos-slider {
  overflow: hidden;
  padding: 30px 0;
  background: white;
  white-space: nowrap;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border-radius: 100px;
}

.logos-slider:before,
.logos-slider:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos-slider:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos-slider:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.logos-slide {
  display: inline-block;
  animation: 20s slide infinite linear;
}

.logos-slide img {
  height: 80px;
  margin: 0 40px;
  transition: all 0.3s ease;
}

.logos-slide img:hover {
  transform: scale(1.1);
}

@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* Utility Classes */
.opacity-10 {
  opacity: 0.1 !important;
}

/* Feature Items */
.feature-item {
  display: flex;
  align-items: center;
  /* Centered alignment */
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background: white;
  border-radius: 20px;
  transition: var(--transition);
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.feature-item:hover {
  transform: translateY(-5px) translateX(5px);
  box-shadow: 0 20px 40px rgba(67, 97, 238, 0.1);
  border-color: rgba(67, 97, 238, 0.2);
}

.feature-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
  font-size: 1.5rem;
  background: white;
  color: var(--primary);
  transition: var(--transition);
  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.15);
  /* Premium shadow */
  border: 1px solid rgba(67, 97, 238, 0.1);
}

.feature-item:hover .feature-icon {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 10px 25px rgba(67, 97, 238, 0.3);
  border-color: transparent;
}

/* Updated Stats Cards for Grid */
.stats-grid-card {
  background: white;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  border: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stats-grid-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-light);
}

.stats-grid-card h3 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gallery Marquee Styles */
.gallery-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.gallery-track {
  display: inline-flex;
  gap: 1.5rem;
  padding: 1rem 0;
}

.gallery-track.scroll-left {
  animation: scrollLeft 40s linear infinite;
}

.gallery-track.scroll-right {
  animation: scrollRight 40s linear infinite;
}

/* Pause on hover */
.gallery-marquee:hover .gallery-track {
  animation-play-state: paused;
}

.gallery-card {
  width: 350px;
  height: 250px;
  flex-shrink: 0;
  border-radius: 16px;
  border: 5px solid white;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

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

.gallery-card:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.gallery-card:hover img {
  transform: scale(1.1);
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* Form Styles */
.form-control,
.form-select {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: var(--text-main) !important;
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  font-size: 1rem;
  transition: var(--transition);
}

.form-control:focus,
.form-select:focus {
  background: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15) !important;
}

.form-control::placeholder {
  color: #6c757d !important;
  opacity: 1;
}

.form-label {
  margin-bottom: 0.5rem;
  color: var(--text-main);
  font-weight: 600;
}

/* ID Card Styles Recommended */
.id-card-wrapper {
  padding: 10px;
  background: transparent;
  display: inline-block;
}

.id-card {
  width: 350px;
  height: 550px;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-family: 'Outfit', sans-serif;
  display: flex;
  flex-direction: column;
}

/* Background Pattern */
/* Background Pattern - Moved to real element for PDF capture */
.id-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  /* SVG Pattern for maximum compatibility with html2canvas */
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20L20 0H10L0 10M10 20L20 10' stroke='%23FF9933' stroke-opacity='0.15' stroke-width='1.5' fill='none'/%3E%3Cpath d='M0 0L20 20' stroke='%23138808' stroke-opacity='0.15' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  z-index: 0;
  pointer-events: none;
}

/* Front Header - Saffron */
.id-card-header {
  height: 110px;
  /* Increased height to give more room */
  background: linear-gradient(135deg, #FF9933, #FF7722);
  padding: 1rem 1.5rem 2.5rem;
  /* More bottom padding */
  color: white;
  text-align: center;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  /* Align to top */
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

.id-card-header-small {
  height: 60px;
  background: linear-gradient(135deg, #FF9933, #FF7722);
  /* Matched gradient */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.id-logo {
  height: 65px;
  /* Increased from 45px */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.id-company-name {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.id-card-body {
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

.id-photo-frame {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 0 8px 25px rgba(0, 0, 60, 0.15);
  /* Subtle blue shadow */
  margin: -50px auto 0;
  /* Neg margin to overlap header */
  overflow: hidden;
  position: relative;
  background: white;
  z-index: 2;
}

.id-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.id-name {
  color: #000080;
  /* Navy Blue for Chakra connection */
  font-weight: 800;
  font-size: 1.8rem;
  margin-top: 1rem;
}

.id-role {
  color: #138808;
  /* India Green */
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 0.95rem;
}

.id-props table td {
  padding: 4px 0;
}

/* Tricolor Bottom Stripe */
.id-stripe-bottom {
  height: 15px;
  background: linear-gradient(90deg, #FF9933, white, #138808);
  width: 100%;
  z-index: 1;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Back Specifics */
.id-card-back .id-card-body {
  padding: 2rem;
}

.card-terms p {
  font-size: 0.8rem;
  color: #666;
}

.letter-spacing-2 {
  letter-spacing: 2px;
}

.text-xs {
  font-size: 0.7rem;
}

.id-qr {
  width: 100%;
  height: auto;
}

/* QR Container */
#qrCodeContainer {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  padding: 0;
}

#qrCodeContainer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ensure Download Buttons are Visible */
#downloadBackBtn {
  border-color: #6c757d;
  color: #6c757d;
}

#downloadBackBtn:hover {
  background-color: #6c757d;
  color: white;
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 25px;
  right: 25px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  animation: whatsapp-pulse 2s infinite;
}

.whatsapp-float:hover {
  background-color: #128C7E;
  color: #FFF;
  transform: scale(1.1);
}

@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}