.logo-gradient {
            background: linear-gradient(90deg, #1e40af 0%, #22d3ee 50%, #7e22ce 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .cta-card {
            background: #2c2c2e;
            border-left: 4px solid #22d3ee;
            transition: transform 0.2s;
        }
        .cta-card:hover {
            transform: translateY(-5px);
            border-left: 4px solid #7e22ce;
        }

        .standard-card {
            background: #2c2c2e;
            border-left: 4px solid #22d3ee;
        }

        .btn-grad {
  background-image: linear-gradient(90deg, #1e40af 0%, #22d3ee 50%, #7e22ce 100%);
}

.btn-grad {
  padding: 8px 20px;
  font-size: small;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  border-radius: 6px;
  display: block;
  outline: none;
  border: none;
}

.btn-grad:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

.okbtn-grad {
  background-image: linear-gradient(90deg, #76b852 0%, #8DC26F 51%, #76b852 100%);
}

.btn-gradient {
    background-image: linear-gradient(to right, #00BFFF, #800080);
    transition: opacity 0.3s;
}
.btn-gradient:hover {
    opacity: 0.9;
}

.bg-gradient {
    background-image: linear-gradient(to right, #00BFFF, #800080);
    transition: opacity 0.3s;
}

.text-gradient {
    background-image: linear-gradient(to right, #00BFFF, #800080);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Style for the dark mode toggle switch */
#darkModeToggle .toggle-dot, #mobileDarkModeToggle .toggle-dot {
    transition: all 0.3s ease-in-out;
}