﻿.zoomButton {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Added opacity transition */
    opacity: 1; /* Initial opacity */
}

.zoomButton:hover {
    transform: scale(1);
    opacity: 1; /* Decrease opacity on hover */
}

.zoomInAnimation {
    animation: zoomIn 1s infinite alternate;
    border-color: #0044ff;
}

@keyframes zoomIn {
    0% {
        transform: scale(1);
        opacity: 1; /* Initial opacity */
    }

    100% {
        transform: scale(1.3);
        opacity: 0.6; /* Decrease opacity when zoomed in */
    }
}
