.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
}

.contact-info .cta-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cta-buttons a {
    margin: 0px !important;
}

.cta-buttons a.mt-2 {
    order:1!important;
}

.cta-buttons a.mt-3 {
    order:2!important;
}

.contact-info .phone-header a {
    font-size: 1.2rem;
    font-weight: 700;
}


/* Outer container holding contact actions and phone number */
    .contact-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-end !important;
        gap: 8px !important; /* Premium vertical layout spacing */
    }

    /* Flex-based CTA buttons container */
    .contact-info .cta-buttons {
        display: flex !important;
        flex-direction: row-reverse !important; /* Matches original float sequence visually */
        gap: 12px !important;
        align-items: center !important;
    }

    /* Reset Bootstrap float/margin properties on CTA buttons */
    .cta-buttons a {
        margin: 0px !important;
        float: none !important;
        font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
    }

    /* Maintain original ordering override logic for other contexts if needed */
    .cta-buttons a.mt-2 {
        order: 1 !important;
    }
    .cta-buttons a.mt-3 {
        order: 2 !important;
    }

    /* ESPAÑOL Language Button - Elegant, clean outline selector style using #007bff */
    .contact-info .cta-buttons .btn-primary {
        background-color: transparent !important;
        color: #007bff !important;
        border: 1.5px solid #007bff !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        border-radius: 4px !important;
        padding: 6px 14px !important;
        text-transform: uppercase !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
    }

    .contact-info .cta-buttons .btn-primary:hover {
        background-color: #007bff !important; /* Solid fill on hover */
        color: #ffffff !important; /* High contrast white text on hover */
        border-color: #007bff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2) !important;
    }

    .contact-info .cta-buttons .btn-primary:active {
        transform: translateY(0) !important;
        background-color: #0056b3 !important; /* Darker blue active fill */
        border-color: #0056b3 !important;
    }

    /* REQUEST A QUOTE Button - Professional using branding yellow-gold #ffc107 */
    .contact-info .cta-buttons .btn-warning {
        background-color: #ffc107 !important;
        border: 1.5px solid #ffc107 !important;
        color: #212529 !important; /* High contrast dark gray text for accessibility */
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        border-radius: 4px !important;
        padding: 6px 16px !important;
        text-transform: uppercase !important;
        box-shadow: 0 2px 4px rgba(255, 193, 7, 0.15) !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .contact-info .cta-buttons .btn-warning:hover {
        background-color: #e0a800 !important;
        border-color: #d39e00 !important;
        color: #212529 !important;
        box-shadow: 0 4px 8px rgba(255, 193, 7, 0.25) !important;
        transform: translateY(-1px) !important;
    }

    .contact-info .cta-buttons .btn-warning:active {
        transform: translateY(1px) !important;
        box-shadow: 0 2px 4px rgba(255, 193, 7, 0.15) !important;
    }

    /* Phone Section Layout */
    .contact-info .phone-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    /* Professional visual label above the phone number */
    .contact-info .phone-header::before {
        content: "SALES & CUSTOMER SUPPORT" !important;
        display: block !important;
        font-size: 0.62rem !important;
        font-weight: 800 !important;
        color: #7f8c8d !important;
        letter-spacing: 1.25px !important;
        margin-bottom: 3px !important;
        text-align: right !important;
        font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
    }

    /* Interactive Phone Number display using brand dark blue #0055a5 */
    .contact-info .phone-header a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: #0055a5 !important;
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
    }

    /* Inline modern SVG Phone Icon in brand dark blue #0055a5 */
    .contact-info .phone-header a::before {
        content: "" !important;
        display: inline-block !important;
        width: 18px !important;
        height: 18px !important;
        aspect-ratio: 1 / 1 !important; /* Prevents distortion */
        flex-shrink: 0 !important; /* Prevents compression inside flex containers */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230055a5'%3E%3Cpath d='M20 15.5c-1.2 0-2.4-.2-3.6-.6-.3-.1-.7 0-1 .3l-2.2 2.2c-2.8-1.4-5.1-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.3-1.1-.5-2.3-.5-3.5 0-.6-.4-1-1-1H4c-.6 0-1 .4-1 1 0 9.4 7.6 17 17 17 .6 0 1-.4 1-1v-3.5c0-.6-.4-1-1-1z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Hover effect shifts to bright blue #007bff */
    .contact-info .phone-header a:hover {
        color: #007bff !important;
        text-decoration: none !important;
        transform: translateX(-2px) !important;
    }

    .contact-info .phone-header a:hover::before {
        transform: rotate(-12deg) scale(1.15) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007bff'%3E%3Cpath d='M20 15.5c-1.2 0-2.4-.2-3.6-.6-.3-.1-.7 0-1 .3l-2.2 2.2c-2.8-1.4-5.1-3.8-6.6-6.6l2.2-2.2c.3-.3.4-.7.2-1-.3-1.1-.5-2.3-.5-3.5 0-.6-.4-1-1-1H4c-.6 0-1 .4-1 1 0 9.4 7.6 17 17 17 .6 0 1-.4 1-1v-3.5c0-.6-.4-1-1-1z'/%3E%3C/svg%3E") !important;
    }
    
    /* Underline micro-interaction */
    .contact-info .phone-header a::after {
        content: "" !important;
        position: absolute !important;
        bottom: -2px !important;
        right: 0 !important;
        width: 0 !important;
        height: 2px !important;
        background-color: #007bff !important;
        transition: width 0.25s ease !important;
    }
    
    .contact-info .phone-header a:hover::after {
        width: calc(100% - 26px) !important; /* Align with the text, excluding the icon width + gap */
    }

    @media screen and (min-width:768px) {
        .navbar {
            border-top: 1px solid #ccedfc;
            margin-top: 10px;
        }
    }


    
/* ==========================================================================
   MOBILE RESPONSIVENESS OVERRIDES
   ========================================================================== */
@media (max-width: 767px) {
    /* Force the header row to layout vertically and center align */
    .mock-header .row,
    .container-fluid[style*="rgba(255,255,255"] .row,
    .row:has(.contact-info) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 10px 0 !important;
    }

    /* Force columns (logo & contact container) to take full width and stack */
    .mock-header .row > div,
    .container-fluid[style*="rgba(255,255,255"] .row > div,
    .row:has(.contact-info) > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 6px 0 !important;
    }

    /* Center-align contact info container elements */
    .contact-info {
        align-items: center !important;
        margin-top: 5px !important;
        gap: 12px !important; /* Slightly more breathing room on mobile */
    }

    /* Align buttons in a neat row centered on mobile */
    .contact-info .cta-buttons {
        justify-content: center !important;
        width: 100% !important;
    }

    /* Center-align phone elements */
    .contact-info .phone-header {
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .contact-info .phone-header::before {
        text-align: center !important;
    }

    .contact-info .phone-header a {
        justify-content: center !important;
    }

    /* Remove default margins/floats on logo link */
    .mock-header .navbar-brand,
    .container-fluid[style*="rgba(255,255,255"] .navbar-brand,
    .row:has(.contact-info) .navbar-brand {
        margin: 0px !important;
        float: none !important;
        display: block !important;
        text-align: center !important;
    }
}