/* Scroll animation */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.animate-on-scroll.show {
    opacity: 1;
    transform: translateY(0);
}

/* Property card animation */
@keyframes propertyHover {
    0% {
        letter-spacing: normal;
        border-color: #dbeafe;
        background-color: white;
        transform: translateY(0);
    }

    50% {
        letter-spacing: 1px;
        border-color: #172554;
        background-color: #eff6ff;
        transform: translateY(-8px);
    }

    100% {
        letter-spacing: 1px;
        border-color: #172554;
        background-color: #eff6ff;
        transform: translateY(-8px);
    }
}

.property-card:hover {
    animation: propertyHover 1.5s ease-out forwards;
}

/* Agent card animation */
@keyframes agent {
    0% {
        transform: translateY(0);
        border-color: #dbeafe;
    }

    60% {
        transform: translateY(-8px);
        border-color: #172554;
    }

    100% {
        transform: translateY(-6px);
        border-color: #172554;
    }
}

.agent-card:hover {
    animation: agent 1.5s ease-out forwards;
}

/* Service cards */
@keyframes service {
    0% {
        transform: translateY(0);
        letter-spacing: normal;
    }

    60% {
        transform: translateY(-8px);
        letter-spacing: 0.03em;
    }

    100% {
        transform: translateY(-6px);
        letter-spacing: 0.03em;
    }
}

.service-card:hover {
    animation: service 1.5s ease-out forwards;
}

/* Animation for buttons */
@keyframes button {
    0% {
        transform: translateY(0);
        letter-spacing: normal;
    }

    50% {
        transform: translateY(-2px);
        letter-spacing: 0.02em;
    }

    100% {
        transform: translateY(-4px);
        letter-spacing: 0.02em;
    }
}

.button:hover {
    animation: button 1.3s ease-out forwards;
}