/*
* Footer Styling Enhancements
* Updates footer headings and icons to match Rapid IT logo blue
*/

/* The blue color from the Rapid IT logo */
:root {
    --logo-blue: #6699CC;  /* This matches the blue in the Rapid IT logo */
}

/* Update footer heading underlines to blue */
.footer-widget h4:after {
    background: var(--logo-blue) !important;
    width: 70px !important;  /* Make the line a bit wider */
    height: 3px !important;  /* Make the line a bit thicker */
}

/* Also style the Services and Contact Info section headers */
.footer-area h4[style*="green-line"] {
    border-color: var(--logo-blue) !important;
}

/* Optional: Add a subtle glow to the footer headings */
.footer-widget h4 {
    text-shadow: 0 0 10px rgba(102, 153, 204, 0.3);
}

/* Update contact info icons to blue */
.contact-info li i {
    color: var(--logo-blue) !important;
}

/* Override ALL text colors in footer to white */
.footer-area,
.footer-area .footer-links li a,
.footer-area .footer-widget a,
.footer-area a,
.footer-area .footer-links a,
.footer-area ul li a,
.footer-area p,
.footer-area ul li,
.footer-area .services-links a,
.footer-area a[href*="services"],
.footer-area a[href*="managed-it"] {
    color: #ffffff !important;
}

/* Deep override for any nested elements */
.footer-widget * {
    color: #ffffff !important;
}

/* Style social media icons with blue */
.social-icons a {
    background: rgba(102, 153, 204, 0.2) !important;
    border: 1px solid var(--logo-blue) !important;
    color: var(--logo-blue) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Hover effects for social icons */
.social-icons a:hover {
    background: var(--logo-blue) !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(102, 153, 204, 0.5) !important;
    transform: translateY(-3px) !important;
}

/* Add pulse animation to social icons */
.social-icons a:before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background: rgba(102, 153, 204, 0.3) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0 !important;
    transition: all 0.5s ease !important;
}

.social-icons a:hover:before {
    width: 150% !important;
    height: 150% !important;
    opacity: 1 !important;
    animation: pulse 1.5s infinite !important;
}

@keyframes pulse {
    0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
    70% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* Style footer links and their hover state - movement only, no color change */
.footer-links li a, 
.footer-area a {
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.footer-links li a:hover, 
.footer-area a:hover {
    text-decoration: none !important;
    transform: translateX(3px) !important;
}