/*
 * Read More Button Fix
 * Prevents movement of the Read More button text and icon on hover
 * Keeps only the glow and underline effects
 * Version 1.0
 */

/* Override the arrow movement effect from style.css */
.service-box .read-more i,
.service-box .read-more:hover i {
    margin-left: 8px !important; /* Keep constant margin */
    transform: none !important; /* No transform */
    transition: none !important; /* No transition */
    animation: none !important; /* No animation */
}

/* Complete override for read-more links in service boxes */
.service-box .read-more {
    display: block !important;
    width: 100% !important;
    max-width: 200px !important;
    margin: 15px auto 0 !important;
    background: #0046be !important;
    color: #ffffff !important;
    padding: 12px 20px !important;
    border-radius: 5px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    text-align: center !important;
    position: relative !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    
    /* Critical property to prevent movement */
    transform: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
}

/* Hover state with only color and glow changes */
.service-box .read-more:hover {
    background: #0052da !important; /* Slightly brighter blue */
    box-shadow: 0 0 15px rgba(0, 70, 190, 0.7), 0 0 25px rgba(0, 70, 230, 0.4) !important; /* Glow effect */
    color: #ffffff !important;
    text-decoration: underline !important; /* Add underline on hover */
    transform: none !important; /* Explicitly prevent movement */
}

/* Ensure no subtle hover animations are in effect */
.service-box .read-more:hover * {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Active state for clicks */
.service-box .read-more:active {
    background: #003698 !important; /* Slightly darker blue */
    box-shadow: 0 0 8px rgba(0, 70, 190, 0.9) !important; /* Reduced glow */
}