/* Phone Contact Button Styles */
.phone-contact-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.phone-button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    padding: 8px 28px;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: all 0.3s ease;
    color: #000;
    font-size: 18px;
}

.phone-button:hover {
    color: #0082c6;
    font-weight: bold;
    transition: color 0.5s ease, font-weight 0.3s ease;
}

.phone-icon {
    display: flex;
    align-items: center;
    width: 33px;
    height: 33px;
    transition: transform 0.3s ease;
}

.phone-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.phone-number {
    white-space: nowrap;
}

.phone-button:hover .phone-icon svg {
    animation: ring 3s ease infinite;
}

@keyframes ring {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(50deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(50deg); }
    100% { transform: rotate(0deg); }
}

@media (max-width: 1600px) {
    .phone-button .phone-number {
        display: none;
    }
}

@media (max-width: 1020px) {
    .phone-contact-button {
        right: 10%;
    }
    .phone-button .phone-number {
        display: inline;
    }
    .menu-toggle {
        position: absolute;
        right: 2%;
    }
}

@media (max-width: 500px) {
    .phone-button .phone-number {
        display: none;
    }
}

@media (max-width: 1400px) {
    .phone-button {
        position: relative;
        transform: none;
        padding: 8px 10px;
    }
}