.w3-theme-l5 {color:#000 !important; background-color:#e8eefa !important}
.w3-theme-l4 {color:#000 !important; background-color:#b2c7ed !important}
.w3-theme-l3 {color:#fff !important; background-color:#658edb !important}
.w3-theme-l2 {color:#fff !important; background-color:#2b5cb7 !important}
.w3-theme-l1 {color:#fff !important; background-color:#19356a !important}
.w3-theme-d1 {color:#fff !important; background-color:#0c1931 !important}
.w3-theme-d2 {color:#fff !important; background-color:#091529 !important}
.w3-theme-d3 {color:#fff !important; background-color:#081020 !important}
.w3-theme-d4 {color:#fff !important; background-color:#060d18 !important}
.w3-theme-d5 {color:#fff !important; background-color:#03070e !important}

.w3-theme-light {color:#000 !important; background-color:#e8eefa !important}
.w3-theme-dark {color:#fff !important; background-color:#03070e !important}
.w3-theme-action {color:#fff !important; background-color:#03070e !important}

.w3-theme {color:#fff !important; background-color:#070f1e !important}
.w3-text-theme {color:#070f1e !important}
.w3-border-theme {border-color:#070f1e !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#070f1e !important}
.w3-hover-text-theme:hover {color:#070f1e !important}
.w3-hover-border-theme:hover {border-color:#070f1e !important}

/*text color*/

.w3-theme-d3 *, .w3-theme *,.w3-theme-d5 *{
    color:#fff;
}

.w3-theme-l5-text {color:#000 !important; }
.w3-theme-l4-text {color:#000 !important; }
.w3-theme-l3-text {color:#000 !important; }
.w3-theme-l2-text {color:#fff !important; }
.w3-theme-l1-text {color:#fff !important; }
.w3-theme-d1-text {color:#fff !important; }
.w3-theme-d2-text {color:#fff !important; }
.w3-theme-d3-text {color:#fff !important; }
.w3-theme-d4-text {color:#fff !important; }
.w3-theme-d5-text {color:#fff !important; }

.w3-theme-light-text {color:#000 !important; }
.w3-theme-dark-text {color:#fff !important; }
.w3-theme-action-text {color:#fff !important; }

.w3-theme-text {color:#fff !important; }
.w3-text-theme-text {color:#485167 !important}
.w3-border-theme-text {border-color:#485167 !important}

.w3-hover-theme-text:hover {color:#fff !important; }
.w3-hover-text-theme-text:hover {color:#485167 !important}
.w3-hover-border-theme-text:hover {border-color:#485167 !important}


.card {
    background-color: #070f1e; /* w3-theme */
    color: #fff;
    border: 1px solid #070f1e;
    border-radius: 12px;
    padding: 20px;
    margin: 10px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card:hover {
    background-color: #091529; /* w3-theme-d2 */
    border-color: #2b5cb7; /* w3-theme-l2 */
    color: #fff;
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.card-title {
    font-size: 18px;
    font-weight: bold;
}

.card-content {
    font-size: 16px;
    color: #b2c7ed; /* w3-theme-l4 */
}

/* Add a smooth color change effect */
.card:hover .card-content {
    color: #658edb; /* w3-theme-l3 */
}

/* Hover effect with border radius and scale */
.card-hover {
    border-radius: 8px;
    transition: all 0.4s ease;
}

.card-hover:hover {
    background-color: #0c1931; /* w3-theme-d1 */
    border-color: #19356a; /* w3-theme-l1 */
    transform: scale(1.05);
}

/* Button inside the card */
.card-button {
    background-color: #2b5cb7; /* w3-theme-l2 */
    color: #fff;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    transition: background-color 0.4s ease;
    cursor: pointer;
    margin-top: 10px;
}

.card-button:hover {
    background-color: #19356a; /* w3-theme-l1 */
}

/* Add animation effect to text */
.card-hover .card-title, 
.card-hover .card-content, 
.card-hover .card-button {
    transition: color 0.4s ease;
}

.card-hover:hover .card-title {
    color: #b2c7ed; /* w3-theme-l4 */
}

.card-hover:hover .card-content {
    color: #658edb; /* w3-theme-l3 */
}

.card-hover:hover .card-button {
    background-color: #0c1931; /* w3-theme-d1 */
}


.no-underline {
    text-decoration: none !important;
}