.navigation{
    position: fixed;
    left: 2%;
    bottom: 12%;
    border: none;
    border-radius: 20%;
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all .4s ease;
    display: none;
    cursor: pointer;
}
.navigation:hover>svg{
    fill: #DAA520;
    transition: all .3s easei;
}
.navigation:hover{
    background-color: var(--background-color);
    border: 2px solid var(--border-color);
}
.whatsapp{
    position: fixed;
    right: 2%;
    bottom: 12%;
    font-family: var(--font--heading);
    z-index: 10;
}
.chats {
    border: none; 
    background-color: #25D366; /* WhatsApp Green */
    color: white;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.chats img {
    -webkit-filter: invert(1);
    width: 40px;
}
.chats:hover {
    background-color: #1EBE5D;
    transform: scale(1.05);
}

.chats:active {
    background-color: #169E4B;
    transform: scale(0.98);
}
@media (max-width:500px){
    .chats {
        font-size: .9rem;
    }
    .chats img {
        width: 20px;
    }
}