About Custom Email Template Design Responsive

I created a custom email function using wp_mail() function. I did everything which is required for mail template. This function is working well. But I need it to be responsive. I found that I can use only inline css in email template. This way there are few css could applied on email template. I can't use Position property of css and other so many css property doesn't work. How can I use external css so it look responsive. Please help.

Here is my code:

// WP Mail function
function html_mail_content_type() {
    return 'text/html';
}
add_filter( 'wp_mail_content_type', 'html_mail_content_type' );
// Function to change email address
function wpb_sender_email( $original_email_address ) {
    return $original_email_address;
}
 
// Function to change sender name
function wpb_sender_name( $original_email_from ) {
    return 'Admin';
}   
// Hooking up our functions to WordPress filters 
add_filter( 'wp_mail_from', 'wpb_sender_email' );
add_filter( 'wp_mail_from_name', 'wpb_sender_name' );
add_action( 'wp_ajax_sent_email', 'sent_email' );
add_action(wp_ajax_nopriv_sent_email, sent_email);

function sent_email() { 
    $to = '[email protected]';
    $subject = Thanks for submitting your information;
    $from = $_POST['user_email'];
    $customerName = $_POST['user_name'];
    $customerNumber = $_POST['phone'];
    $headers = MIME-Version: 1.0 . \r\n;
    $headers = array('From: Admin [email protected]',
                  'CC: '.$_POST['user_email'].'',);
$message = '!DOCTYPE html
                html lang=en
                head
                titleEstimate Summary/title
                meta charset=utf-8
                meta name=viewport content=width=device-width, initial-scale=1
                /head';
    $message .= 'body';
    $message .= 'div
                div
                table style=border:2px solid #172c5b; width: 80%; margin: 0 auto;
                        tr 
                            th style=border-bottom: 1px solid #172c5b; border-right: 1px solid #172c5b; text-align: left; font-size: 16px; padding-left: 15px;Title/th
                            th style=border-bottom: 1px solid #172c5b; text-align: left; font-size: 16px;Description/th
                        /tr
                        tr
                            td style=text-align: center;text-align: left; border-bottom: 1px solid #172c5b; border-right: 1px solid #172c5b; font-size: 16px; padding-left: 15px; padding-right: 40px;Customer Name:/td
                            td style=text-align: center;text-align: left; border-bottom: 1px solid #172c5b;  font-size: 16px;'.$customerName.'/td
                        /tr
                        tr
                            td style=text-align: center;text-align: left; border-bottom: 1px solid #172c5b; border-right: 1px solid #172c5b; font-size: 16px; padding-left: 15px; padding-right: 40px;Customer Phone: /td
                            td style=text-align: center;text-align: left; border-bottom: 1px solid #172c5b; font-size: 16px;'.$customerNumber.'/td
                        /tr
                            td style=text-align: center;text-align: left; border-top: 1px solid #172c5b; border-bottom: 1px solid #172c5b; border-right: 1px solid #172c5b; font-size: 16px; padding-left: 15px; padding-right: 40px;Moving To:/td
                            td style=text-align: center;text-align: left; border-bottom: 1px solid #172c5b; font-size: 16px;City/td
                        /tr
                        tr
                            td style=text-align: center;text-align: left; border-bottom: 1px solid #172c5b; border-right: 1px solid #172c5b; font-size: 16px; padding-left: 15px; padding-right: 40px;Types of Move:/td
                            td style=text-align: center;text-align: left; border-bottom: 1px solid #172c5b;  font-size: 16px;Types/td
                        /tr
                        tr
                            td style=text-align: center;text-align: left; border-bottom: 1px solid #172c5b; border-right: 1px solid #172c5b; font-size: 16px; padding-left: 15px; padding-right: 25px;Date /td
                            td style=text-align: center;text-align: left; border-bottom: 1px solid #172c5b; font-size: 16px;21/12/2021/td
                        /tr
                    /table
                /div
                /div';
    $message .= '/body/html';
    $success = wp_mail( $to, $subject, $message, $headers, array( '' ) );
    if($success){
    echo 'Success'; 
    }
    else{
        echo 'Error';
    }
    exit();
}



It is just an example. Now Please help how can I add media queries for making it responsive.