*,::before,::after{
      transition: 0.3s linear;
    }

    :root {
  --bg-color: #ffffff;
  --text-color: #212529;
  --card-bg: #ffffff;
  --section-bg: #f8f9fa;
  --border-color: #dee2e6;
}

body.dark-mode {
  --bg-color: #121212;
  --text-color: #e9ecef;
  --card-bg: #1e1e1e;
  --section-bg: #181818;
  --border-color: #2c2c2c;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.bg-light {
  background-color: var(--section-bg) !important;
}

.card,
.navbar,
.border,
footer {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

.navbar,
footer {
  transition: background-color 0.3s;
}

.text-muted {
  color: #adb5bd !important;
}


    body {
      font-family: 'Inter', sans-serif;
    }
    .hero {
      background: linear-gradient(135deg, #0d6efd, #0a58ca);
      color: #fff;
      padding: 100px 0;
    }
    .icon-box {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #e9f2ff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: #0d6efd;
      margin-bottom: 15px;
    }
    .section-padding {
      padding: 80px 0;
    }
    .pricing-card {
      border-radius: 15px;
      transition: transform 0.3s;
    }
    .pricing-card:hover {
      transform: translateY(-8px);
    }


    .hover .col-md-4:hover{
      box-shadow: 0 0 3px 0px rgba(0, 0, 0, .4);
      border-radius: 10px;
      transform: translateY(10px);
    }

    .card {
      transition: transform 0.3s, background-color 0.3s;
    }

.hero {
  background: linear-gradient(135deg, #0d6efd, #0a58ca);
  color: #fff;
}

body.dark-mode .hero {
  background: linear-gradient(135deg, #0b5ed7, #084298);
}