form .table-row {
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.table-row:hover {
    transform: translateY(-5px) scale(1.05); /* Slightly lift and scale up the row */
    background-color: #f1f1f1; /* Change background color */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Add shadow effect */
}
/* Adding animation to table rows */
.table-row {
    animation: fadeInRow 0.5s ease-in-out forwards;
}
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,.08);
    transition: transform 0.4s cubic-bezier(.17,.67,.83,.67), box-shadow 0.4s cubic-bezier(.17,.67,.83,.67), background-color 0.3s ease;
    background-color: #f0f0f0;
    color: #000;
}
.z-index-1{
    z-index: 1;
}
.bg-primary-custom {
    background-color: #FF6D5A !important; /* Kept custom primary */
}
.text-primary-custom {
    color: #FF6D5A !important; /* Kept custom primary */
}
/* General hover effect for all buttons */
.btn {
    transition: all 0.3s ease-in-out; /* Ensure smooth hover transitions */
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Specific hover effect for the Get Started button */
.btn[href="/register"]:hover {
    background-color: #FF503D; /* Slightly darker shade of #FF6D5A */
    border-color: #FF503D;
    color: #fff; /* Ensure white text */
}

/* Specific hover effect for the Learn More button */
.btn[href="/about"]:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    color: #FF6D5A; /* Custom primary color */
    border-color: #FF6D5A; /* Border color matches primary */
}
/* Keyframes for row animation */
@keyframes fadeInRow {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Custom animations for table header */
thead th {
    animation: bounceInHeader 1s ease-out;
}
/* Keyframes for table header animation */
@keyframes bounceInHeader {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    60% {
        opacity: 1;
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}