/* =================================================================*********
   Lively Contact Section Enhancements
   ================================================================********** */

/* 1. Animated Gradient Background for the Contact Section */
#contact {
    /* Deep dark blue/purple gradient for smoother transition from stats */
    background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #1f2833);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: #fff;
    /* Ensure text is readable on colorful background */
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Ensure section padding remains consistent */
#contact.section-padding {
    padding: 80px 0;
}

/* 2. Floating Form Container */
.contact-form-area {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    /* Softer corners */
    /* Ensure it stands out against the gradient */
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    color: #333;
    /* Fix visibility on white card */
}

.contact-form-area:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* 3. Input Fields Interaction */
.form-control {
    border: 2px solid #eee;
    /* Thicker border for better visibility */
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #00b4d9;
    box-shadow: 0 0 10px rgba(0, 180, 217, 0.2);
    transform: scale(1.02);
    /* Subtle pop */
    background: #fff;
}

/* 4. Pulse Button Animation */
#form-submit {
    animation: pulse-blue 2s infinite;
    font-weight: 700;
    letter-spacing: 1px;
}

@keyframes pulse-blue {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 180, 217, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 180, 217, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 180, 217, 0);
    }
}

/* Stop pulse on hover so it feels solid when clicked */
#form-submit:hover {
    animation: none;
    transform: scale(1.05);
}

/* 5. Contact Info Icons Bounce */
.contact-icon {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.single-contact:hover .contact-icon {
    transform: translateY(-50%) scale(1.2);
    /* Keep vertical centering logic from main.css */
}

/* Update text colors in the contact info area to match new background context if needed,
   but since they are inside .footer-right-area which is separate, they might need a backdrop 
   or we just ensure the gradient doesn't overwhelm them. 
   
   Actually, the contact form is on the left, and "Content Address" is on the right.
   We should give the Right Side a card look too so it matches the Form.
*/

.footer-right-area {
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    height: 100%;
    color: #333;
    /* Fix visibility on white card */
    /* Match height if possible */
}

.footer-right-contact {
    border: none;
    /* Remove default border since we have a card now */
    margin-top: 15px;
}