button {
    font-size: 55px;
    bottom: 85px;
    transition: all 0.4s; 
}

/* Call button */
.callbtn {
    color: rgb(215, 94, 253);
    left: 50rem;
}

.callbtn:hover {
    cursor: pointer;
    color: rgb(218, 142, 241);
    transform: scale(1.2);
}

.callbtn:active {
    color: rgb(215, 94, 253);
    transform: scale(1);
}

/* Incoming call button */
.incomingCall {
    color: rgb(153, 255, 0);
    left: 60rem;
}

.incomingCall:hover {
    cursor: pointer;
    color: rgb(140, 233, 0);
    transform: scale(1.2);
}

.incomingCall:active {
    color: rgb(153, 255, 0);
    transform: scale(1);
}

/* End call button */
.endCall {
    color: rgb(255, 0, 0);
    left: 70rem; 
}

.endCall:hover {
    cursor: pointer;
    color: rgb(255, 82, 82);
    transform: scale(1.2);
}

.endCall:active {
    color: rgb(255, 0, 0);
    transform: scale(1);
}

/* Responsive Design */
@media (max-width: 800px) {
    .callbtn, .incomingCall, .endCall {
        font-size: 40px; 
        left: 5rem; 
    }
}

/* Additional styles for accessibility */
button:focus {
    outline: none; 
    box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.5); }


.feature-card {
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #f8f9fa;
    /* Light grey background */
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    font-size: 2rem;
    color: #007bff;
    /* Primary color for icon */
}