@charset "utf-8";
/* CSS Document */

		   .feature-card {
    color: var(--gray-500);
    transition: 0.3s;
}

/* Change ALL text inside on hover */
.feature-card:hover {
    color: #fff;
}

/* Optional: icon color also */
.feature-card:hover i {
    color: #fff;
}

			   
.feature-card:hover {
    color: #fff;
    background: #1f2937;
    border-radius: 10px;
}
			   
			   
.feature-card p {
    transition: 0.3s;
}

.feature-card:hover p {
    color: #fff;
}
			
			.feature-card h5 {
    color: #0D47A1;
}
			
			.feature-card:hover h5 {
    color: #fff;
}

.feature-card p {
    transition: 0.3s;
}

.feature-card:hover p {
    color: #fff;
}


   
    .table-container {
        max-width: 700px;
        margin: auto;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        overflow: hidden;
    }

    .table-title {
        background: #2b7cff;
        color: #fff;
        padding: 15px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead {
        background: #f0f4ff;
    }

    thead th {
        padding: 14px;
        text-align: left;
        font-size: 15px;
        color: #333;
    }

    tbody tr {
        border-bottom: 1px solid #eee;
        transition: 0.3s;
    }

    tbody tr:hover {
        background: #f9fbff;
        transform: scale(1.01);
    }

    tbody td {
        padding: 14px;
        font-size: 14px;
        color: #555;
    }

    .sensor {
        font-weight: 600;
        color: #2b7cff;
    }

    .protection {
        color: #444;
    }

    /* Optional badge style */
    .badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        background: #e6f0ff;
        color: #2b7cff;
    }