/* Landing Page Styles */

  :root {
      --primary-color: #0d6efd;
      --secondary-color: #6c757d;
      --success-color: #198754;
      --info-color: #0dcaf0;
      --warning-color: #ffc107;
      --danger-color: #dc3545;
      --light-color: #f8f9fa;
      --dark-color: #212529;
  }

  /* General Styles */
  body {
      padding-top: 76px; /* Account for fixed navbar */
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }

  /* Navbar Styles */
  .navbar {
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      background-color: rgba(255, 255, 255, 0.95) !important;
  }

  .navbar-brand {
      font-size: 1.5rem;
      transition: transform 0.3s ease;
  }

  .navbar-brand:hover {
      transform: scale(1.05);
  }

  .navbar .nav-link {
      font-weight: 500;
      transition: color 0.3s ease;
      position: relative;
  }

  .navbar .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 50%;
      background-color: var(--primary-color);
      transition: all 0.3s ease;
  }

  .navbar .nav-link:hover::after {
      width: 100%;
      left: 0;
  }

  /* Hero Section */
  .hero-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(13, 110, 253, 0.02) 100%);
      position: relative;
      overflow: hidden;
  }

  .hero-section::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -10%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(13, 110, 253, 0.1) 0%, transparent 70%);
      animation: float 20s ease-in-out infinite;
  }

  @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(10deg); }
  }

  .hero-image-wrapper {
      position: relative;
      animation: fadeInUp 1s ease;
  }

  .floating-card {
      animation: floatCard 3s ease-in-out infinite;
      z-index: 10;
  }

  @keyframes floatCard {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
  }

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

  /* Feature Cards */
  .feature-card {
      transition: all 0.3s ease;
      border: 1px solid transparent;
      cursor: pointer;
  }

  .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
      border-color: var(--primary-color);
  }

  .feature-icon {
      transition: transform 0.3s ease;
  }

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

  /* Benefit Items */
  .benefit-item {
      transition: transform 0.3s ease;
  }

  .benefit-item:hover {
      transform: translateX(10px);
  }

  /* Stats Container */
  .stats-container {
      background: linear-gradient(135deg, var(--light-color) 0%, white 100%);
      position: relative;
      overflow: hidden;
  }

  .stats-container::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(13, 110, 253, 0.05) 0%, transparent 70%);
  }

  .stats-container h3 {
      animation: countUp 2s ease;
  }

  @keyframes countUp {
      from {
          opacity: 0;
          transform: scale(0.5);
      }
      to {
          opacity: 1;
          transform: scale(1);
      }
  }

  /* Contact Section */
  .contact-info a {
      color: var(--dark-color);
      transition: color 0.3s ease;
  }

  .contact-info a:hover {
      color: var(--primary-color);
  }

  .social-links .btn {
      transition: all 0.3s ease;
  }

  .social-links .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
  }

  /* Form Styles */
  .form-control, .form-select {
      border-radius: 0.5rem;
      border: 1px solid #dee2e6;
      transition: all 0.3s ease;
  }

  .form-control:focus, .form-select:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  }

  /* Button Styles */
  .btn {
      border-radius: 0.5rem;
      transition: all 0.3s ease;
      font-weight: 500;
  }

  .btn-primary {
      background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
      border: none;
  }

  .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 20px rgba(13, 110, 253, 0.4);
  }

  .btn-outline-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 20px rgba(13, 110, 253, 0.2);
  }

  .btn-lg {
      padding: 0.75rem 2rem;
  }

  /* Footer */
  footer {
      background: linear-gradient(135deg, #2c3e50 0%, var(--dark-color) 100%);
  }

  footer a {
      transition: color 0.3s ease;
  }

  footer a:hover {
      color: white !important;
  }

  /* Animations on Scroll */
  .animate-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s ease;
  }

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

  /* Responsive Design */
  @media (max-width: 768px) {
      body {
          padding-top: 56px;
      }

      .hero-section {
          padding-top: 2rem;
          padding-bottom: 2rem;
      }

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

      .display-5 {
          font-size: 2rem;
      }

      .floating-card {
          position: static !important;
          margin: 1rem 0 !important;
      }
  }

  /* Loading Animation */
  .spinner-border {
      animation: spinner-border 0.75s linear infinite;
  }

  @keyframes spinner-border {
      to { transform: rotate(360deg); }
  }

  /* Smooth Scroll Behavior */
  html {
      scroll-behavior: smooth;
  }

  /* Section Padding */
  section {
      padding-top: 5rem;
      padding-bottom: 5rem;
  }

  /* Text Shadows for Better Readability */
  .hero-section h1 {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  /* Gradient Text */
  .text-gradient {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--info-color) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  /* Card Shadows */
  .shadow-sm {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  }

  .shadow {
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
  }

  .shadow-lg {
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  }

  /* Hover Effects for Images */
  img {
      transition: transform 0.3s ease;
  }

  img:hover {
      transform: scale(1.02);
  }

  /* Custom Scrollbar */
  ::-webkit-scrollbar {
      width: 10px;
  }

  ::-webkit-scrollbar-track {
      background: var(--light-color);
  }

  ::-webkit-scrollbar-thumb {
      background: var(--primary-color);
      border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
      background: #0056b3;
  }