/* Start custom CSS for html, class: .elementor-element-772d5b2 */<!-- 
========================================================================================
ASPPL WORDPRESS / ELEMENTOR CAREER PAGE SUBMISSION PHP SNIPPET
========================================================================================
Copy and paste the following PHP snippet into your WordPress theme's functions.php 
or use a plugin like "Code Snippets". This script processes the AJAX form submit, 
attaches the uploaded resume PDF, and emails it directly to hr@aspplgroup.com.

<?php
add_action('wp_ajax_submit_job_application', 'handle_job_application_submit');
add_action('wp_ajax_nopriv_submit_job_application', 'handle_job_application_submit');

function handle_job_application_submit() {
    $first_name = sanitize_text_field($_POST['first_name']);
    $last_name = sanitize_text_field($_POST['last_name']);
    $phone = sanitize_text_field($_POST['phone']);
    $email = sanitize_email($_POST['email']);
    $position = sanitize_text_field($_POST['position']);
    $experience = sanitize_text_field($_POST['experience']);

    if (empty($first_name) || empty($last_name) || empty($phone) || empty($email) || empty($position) || empty($experience)) {
        wp_send_json_error('Please fill out all required fields.');
    }

    if (!is_email($email)) {
        wp_send_json_error('Invalid email address.');
    }

    if (!isset($_FILES['resume']) || $_FILES['resume']['error'] !== UPLOAD_ERR_OK) {
        wp_send_json_error('Resume file is required.');
    }

    $file = $_FILES['resume'];
    $file_ext = pathinfo($file['name'], PATHINFO_EXTENSION);
    if (strtolower($file_ext) !== 'pdf') {
        wp_send_json_error('Only PDF resumes are accepted.');
    }

    if ($file['size'] > 10 * 1024 * 1024) {
        wp_send_json_error('Resume exceeds maximum size of 10MB.');
    }

    $upload_dir = wp_upload_dir();
    $temp_dir = $upload_dir['basedir'] . '/asppl-resumes';
    if (!file_exists($temp_dir)) {
        wp_mkdir_p($temp_dir);
    }

    $temp_filename = sanitize_file_name(time() . '_' . $first_name . '_' . $last_name . '_Resume.pdf');
    $temp_filepath = $temp_dir . '/' . $temp_filename;

    if (!move_uploaded_file($file['tmp_name'], $temp_filepath)) {
        wp_send_json_error('Failed to process uploaded file.');
    }

    $to = 'hr@aspplgroup.com';
    $subject = 'New Job Application: ' . $position . ' - ' . $first_name . ' ' . $last_name;
    
    $headers = array(
        'Content-Type: text/html; charset=UTF-8',
        'Reply-To: ' . $first_name . ' ' . $last_name . ' <' . $email . '>'
    );

    $body = '
    <html>
    <head>
        <title>New Job Application</title>
        <style>
            body { font-family: Arial, sans-serif; line-height: 1.6; color: #333333; }
            .container { max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px; }
            h2 { color: #0b1a30; border-bottom: 2px solid #7cbb3b; padding-bottom: 10px; }
            table { width: 100%; border-collapse: collapse; margin-top: 15px; }
            td { padding: 10px; border-bottom: 1px solid #f1f5f9; }
            .label { font-weight: bold; color: #64748b; width: 35%; }
            .value { color: #0f172a; font-weight: 500; }
        </style>
    </head>
    <body>
        <div class="container">
            <h2>New Career Application Received</h2>
            <p>A new application has been submitted through the ASPPL Career portal. Details are as follows:</p>
            <table>
                <tr>
                    <td class="label">Candidate Name:</td>
                    <td class="value">' . esc_html($first_name) . ' ' . esc_html($last_name) . '</td>
                </tr>
                <tr>
                    <td class="label">Position Applied:</td>
                    <td class="value"><strong>' . esc_html($position) . '</strong></td>
                </tr>
                <tr>
                    <td class="label">Experience Level:</td>
                    <td class="value">' . esc_html($experience) . '</td>
                </tr>
                <tr>
                    <td class="label">Email Address:</td>
                    <td class="value"><a href="mailto:' . esc_attr($email) . '">' . esc_html($email) . '</a></td>
                </tr>
                <tr>
                    <td class="label">Phone Number:</td>
                    <td class="value"><a href="tel:' . esc_attr($phone) . '">' . esc_html($phone) . '</a></td>
                </tr>
            </table>
            <br>
            <p><em>The applicant\'s resume PDF is attached to this email.</em></p>
        </div>
    </body>
    </html>
    ';

    $attachments = array($temp_filepath);
    $mail_success = wp_mail($to, $subject, $body, $headers, $attachments);

    if (file_exists($temp_filepath)) {
        unlink($temp_filepath);
    }

    if ($mail_success) {
        wp_send_json_success('Your application was submitted successfully.');
    } else {
        wp_send_json_error('Failed to send email. Please contact HR department directly.');
    }
}
?>
========================================================================================
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Careers at ASPPL - Powering a Sustainable Future</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Urbanist:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- FontAwesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* ==========================================================================
           ASPPL DESIGN SYSTEM & TOKENS (Vanilla CSS)
           ========================================================================== */
        :root {
            /* Colors */
            --asppl-green-primary: #7cbb3b;
            --asppl-green-hover: #67a22e;
            --asppl-green-light: #B9D32A;
            --asppl-green-dark: #219753;
            --asppl-navy-blue: #0b1a30;
            --asppl-navy-light: #162a45;
            --asppl-text-dark: #1f2937;
            --asppl-text-muted: #64748b;
            --asppl-bg-light: #f8fafc;
            --asppl-bg-card: #ffffff;
            --asppl-border-color: #e2e8f0;
            
            /* Gradients */
            --asppl-grad-green: linear-gradient(135deg, #d6df22 0%, #7cbb3b 30%, #219753 100%);
            --asppl-grad-accent: linear-gradient(90deg, #209753 0%, #B9D32A 100%);
            --asppl-grad-dark: linear-gradient(135deg, #0b1a30 0%, #162a45 100%);
            
            /* Transitions & Shadows */
            --asppl-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --asppl-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            --asppl-shadow-md: 0 10px 25px -5px rgba(11, 26, 48, 0.08), 0 8px 10px -6px rgba(11, 26, 48, 0.05);
            --asppl-shadow-lg: 0 20px 40px -10px rgba(11, 26, 48, 0.12), 0 10px 20px -10px rgba(11, 26, 48, 0.08);
            
            /* Layout & Spacing */
            --asppl-radius-lg: 20px;
            --asppl-radius-md: 12px;
            --asppl-radius-sm: 8px;
        }

        /* Base styles */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            font-family: 'Inter', sans-serif;
            color: var(--asppl-text-dark);
            background-color: var(--asppl-bg-light);
            line-height: 1.6;
        }

        body {
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Urbanist', sans-serif;
            font-weight: 700;
            color: var(--asppl-navy-blue);
        }

        p {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            color: var(--asppl-text-muted);
        }

        /* Utility classes */
        .container {
            width: 100%;
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .text-center {
            text-align: center;
        }

        .highlight-text {
            color: var(--asppl-green-primary);
            position: relative;
            display: inline-block;
        }

        /* ==========================================================================
           CULTURE & MISSION SECTION (Form right, Text & Pillars left)
           ========================================================================== */
        .culture-section {
            padding: 80px 0;
            background-color: #ffffff;
            position: relative;
            overflow: hidden;
        }

        .section-header {
            max-width: 700px;
            margin: 0 auto 50px;
        }

        .section-subtitle {
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--asppl-green-primary);
            margin-bottom: 12px;
            display: block;
        }

        .section-title {
            font-size: 36px;
            line-height: 1.25;
            margin-bottom: 20px;
        }

        .section-header p {
            font-size: 16px;
        }

        .culture-content-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 48px;
            align-items: stretch;
        }

        .culture-text-area {
            font-size: 16px;
            line-height: 1.7;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .culture-paragraph {
            margin-bottom: 20px;
            color: #4b5563;
        }

        .culture-paragraph:last-of-type {
            margin-bottom: 30px;
            font-weight: 500;
            border-left: 4px solid var(--asppl-green-primary);
            padding-left: 20px;
            color: var(--asppl-navy-blue);
        }

        /* 4 Pillars 2x2 grid inside left column */
        .culture-cards-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 30px;
        }

        .culture-card {
            background-color: var(--asppl-bg-light);
            border: 1px solid var(--asppl-border-color);
            border-radius: var(--asppl-radius-md);
            padding: 22px;
            transition: var(--asppl-transition);
        }

        .culture-card:hover {
            transform: translateY(-5px);
            background-color: #ffffff;
            box-shadow: var(--asppl-shadow-md);
            border-color: rgba(124, 187, 59, 0.2);
        }

        .culture-card-icon {
            width: 40px;
            height: 40px;
            background-color: rgba(124, 187, 59, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--asppl-green-primary);
            font-size: 16px;
            margin-bottom: 14px;
            transition: var(--asppl-transition);
        }

        .culture-card:hover .culture-card-icon {
            background: var(--asppl-grad-green);
            color: #ffffff;
        }

        .culture-card-title {
            font-size: 16px;
            margin-bottom: 6px;
            font-family: 'Poppins', sans-serif;
            color: var(--asppl-navy-blue);
        }

        .culture-card-desc {
            font-size: 13px;
            line-height: 1.5;
        }

        /* ==========================================================================
           AVAILABLE POSITIONS SECTION
           ========================================================================== */
        .positions-section {
            padding: 80px 0;
            background-color: var(--asppl-bg-light);
            border-top: 1px solid var(--asppl-border-color);
        }

        .positions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .position-card {
            background-color: #ffffff;
            border-radius: var(--asppl-radius-md);
            border: 1px solid var(--asppl-border-color);
            padding: 32px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: var(--asppl-transition);
            position: relative;
            overflow: hidden;
            box-shadow: var(--asppl-shadow-sm);
        }

        .position-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background-color: var(--asppl-green-primary);
            opacity: 0;
            transition: var(--asppl-transition);
        }

        .position-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--asppl-shadow-lg);
            border-color: rgba(124, 187, 59, 0.15);
        }

        .position-card:hover::before {
            opacity: 1;
        }

        .pos-header {
            margin-bottom: 20px;
        }

        .pos-dept {
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--asppl-green-primary);
            margin-bottom: 8px;
            display: block;
        }

        .pos-title {
            font-size: 20px;
            margin-bottom: 12px;
            font-family: 'Poppins', sans-serif;
            color: var(--asppl-navy-blue);
        }

        .pos-meta-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 20px;
            margin-bottom: 20px;
        }

        .pos-meta {
            font-size: 13px;
            color: var(--asppl-text-muted);
            display: flex;
            align-items: center;
        }

        .pos-meta i {
            margin-right: 6px;
            color: var(--asppl-green-primary);
        }

        .pos-description {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 24px;
            flex-grow: 1;
        }

        .pos-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: transparent;
            border: 1px solid var(--asppl-navy-blue);
            color: var(--asppl-navy-blue);
            padding: 10px 20px;
            border-radius: var(--asppl-radius-sm);
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Poppins', sans-serif;
            cursor: pointer;
            transition: var(--asppl-transition);
        }

        .pos-card-btn-wrap {
            margin-top: auto;
        }

        .position-card:hover .pos-btn {
            background-color: var(--asppl-green-primary);
            border-color: var(--asppl-green-primary);
            color: #ffffff;
            box-shadow: 0 4px 10px rgba(124, 187, 59, 0.2);
        }

        /* ==========================================================================
           JOB APPLICATION FORM CONTAINER
           ========================================================================== */
        .apply-container-inline {
            width: 100%;
            z-index: 10;
        }

        /* Dynamic background blobs floating in Section 1 */
        .apply-bg-shape-1 {
            position: absolute;
            left: -150px;
            top: 10%;
            width: 350px;
            height: 350px;
            background: linear-gradient(135deg, rgba(124, 187, 59, 0.12) 0%, rgba(33, 151, 83, 0.15) 100%);
            border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            pointer-events: none;
            z-index: 1;
        }

        .apply-bg-shape-2 {
            position: absolute;
            right: -100px;
            bottom: 10%;
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, rgba(185, 211, 42, 0.15) 0%, rgba(124, 187, 59, 0.08) 100%);
            border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%;
            pointer-events: none;
            z-index: 1;
        }

        /* Form Wrapper Card matching attachment */
        .form-card {
            background-color: var(--asppl-bg-card);
            border-radius: 24px;
            box-shadow: var(--asppl-shadow-lg), 0 30px 60px rgba(11, 26, 48, 0.05);
            border: 1px solid rgba(226, 232, 240, 0.8);
            overflow: hidden;
            position: relative;
        }

        .form-card::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 120px;
            height: 120px;
            background-image: radial-gradient(circle, var(--asppl-border-color) 1.5px, transparent 1.5px);
            background-size: 12px 12px;
            opacity: 0.35;
            margin-top: 15px;
            margin-right: 15px;
            pointer-events: none;
        }

        /* Form Header details */
        .form-header {
            padding: 32px 40px 20px;
            border-bottom: 1px solid var(--asppl-border-color);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .form-brand-wrap {
            display: flex;
            flex-direction: column;
        }

        /* Visual elements replicating the logo */
        .form-logo {
            font-family: 'Urbanist', sans-serif;
            font-weight: 800;
            font-size: 32px;
            line-height: 1.1;
            letter-spacing: -0.5px;
            color: var(--asppl-navy-blue);
        }

        .form-logo span {
            color: var(--asppl-green-primary);
        }

        .form-tagline {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.5px;
            color: var(--asppl-text-muted);
            margin-top: 4px;
            font-family: 'Poppins', sans-serif;
        }

        /* Styled Green icon on right side of form header */
        .form-icon-badge {
            width: 48px;
            height: 60px;
            border: 1.5px solid var(--asppl-green-primary);
            border-radius: 8px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--asppl-green-primary);
            padding: 8px;
        }

        .form-icon-badge::before {
            content: '';
            position: absolute;
            top: 4px;
            right: 4px;
            width: 8px;
            height: 8px;
            border-top: 1.5px solid var(--asppl-green-primary);
            border-right: 1.5px solid var(--asppl-green-primary);
        }

        .form-icon-badge i {
            font-size: 20px;
            margin-bottom: 4px;
        }

        .form-icon-badge-lines {
            width: 16px;
            height: 1.5px;
            background-color: var(--asppl-green-primary);
            margin-top: 3px;
            position: relative;
        }

        .form-icon-badge-lines::after {
            content: '';
            position: absolute;
            top: -4px;
            left: 0;
            width: 10px;
            height: 1.5px;
            background-color: var(--asppl-green-primary);
        }

        /* Form Body area */
        .form-body {
            padding: 24px 40px 40px;
        }

        .form-title {
            font-size: 22px;
            text-transform: uppercase;
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            color: var(--asppl-navy-blue);
            margin-bottom: 24px;
            letter-spacing: 0.5px;
        }

        /* Input styling */
        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 600;
            color: var(--asppl-navy-blue);
            margin-bottom: 8px;
            font-family: 'Poppins', sans-serif;
        }

        .form-label i {
            margin-right: 8px;
            color: var(--asppl-green-primary);
            font-size: 15px;
        }

        .form-label span {
            color: #ef4444;
            margin-left: 4px;
        }

        /* Grid inputs for First & Last names */
        .name-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .input-control {
            width: 100%;
            height: 46px;
            padding: 10px 14px;
            border-radius: var(--asppl-radius-sm);
            border: 1px solid var(--asppl-border-color);
            background-color: #ffffff;
            font-size: 13.5px;
            font-family: 'Inter', sans-serif;
            color: var(--asppl-text-dark);
            outline: none;
            transition: var(--asppl-transition);
        }

        .input-control::placeholder {
            color: #94a3b8;
        }

        .input-control:hover {
            border-color: #cbd5e1;
        }

        .input-control:focus {
            border-color: var(--asppl-green-primary);
            box-shadow: 0 0 0 4px rgba(124, 187, 59, 0.1);
        }

        /* Styled select dropdown elements */
        .select-wrapper {
            position: relative;
        }

        .select-wrapper select {
            appearance: none;
            -webkit-appearance: none;
            padding-right: 40px;
            cursor: pointer;
        }

        .select-wrapper::after {
            content: '\f107';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--asppl-green-primary);
            pointer-events: none;
            font-size: 15px;
            transition: var(--asppl-transition);
        }

        .select-wrapper:hover::after {
            transform: translateY(-30%);
        }

        /* Phone input custom styling matching country drop select */
        .phone-input-wrap {
            display: flex;
            border: 1px solid var(--asppl-border-color);
            border-radius: var(--asppl-radius-sm);
            overflow: hidden;
            transition: var(--asppl-transition);
            background-color: #ffffff;
        }

        .phone-input-wrap:hover {
            border-color: #cbd5e1;
        }

        .phone-input-wrap:focus-within {
            border-color: var(--asppl-green-primary);
            box-shadow: 0 0 0 4px rgba(124, 187, 59, 0.1);
        }

        .country-.elementor-18 .elementor-element.elementor-element-772d5b2 {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 12px;
            background-color: #f8fafc;
            border-right: 1px solid var(--asppl-border-color);
            cursor: pointer;
            user-select: none;
        }

        .flag-img {
            width: 22px;
            height: 14px;
            object-fit: cover;
            border-radius: 2px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .country-arrow {
            font-size: 9px;
            color: var(--asppl-text-muted);
            transition: var(--asppl-transition);
        }

        .phone-input-wrap input {
            border: none;
            outline: none;
            width: 100%;
            height: 46px;
            padding: 10px 14px;
            font-size: 13.5px;
            font-family: 'Inter', sans-serif;
            color: var(--asppl-text-dark);
        }

        /* Resume drag-and-drop zone (Compact Horizontal Layout) */
        .upload-zone {
            border: 2px dashed #cbd5e1;
            border-radius: var(--asppl-radius-md);
            padding: 12px 16px;
            background-color: #fafbfd;
            cursor: pointer;
            transition: var(--asppl-transition);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .upload-zone:hover, .upload-zone.dragover {
            border-color: var(--asppl-green-primary);
            background-color: rgba(124, 187, 59, 0.03);
        }

        .upload-zone-left {
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: left;
        }

        .upload-zone-icon {
            font-size: 24px;
            color: var(--asppl-green-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--asppl-transition);
        }

        .upload-zone:hover .upload-zone-icon {
            transform: translateY(-2px);
        }

        .upload-zone-meta {
            display: flex;
            flex-direction: column;
        }

        .upload-zone-text {
            font-size: 13px;
            font-weight: 600;
            color: var(--asppl-text-dark);
        }

        .upload-zone-info {
            font-size: 11px;
            color: var(--asppl-text-muted);
            margin-top: 2px;
        }

        .btn-browse {
            display: inline-block;
            background-color: #ffffff;
            border: 1px solid var(--asppl-green-primary);
            color: var(--asppl-green-primary);
            padding: 6px 14px;
            border-radius: var(--asppl-radius-sm);
            font-family: 'Poppins', sans-serif;
            font-weight: 500;
            font-size: 12px;
            transition: var(--asppl-transition);
            cursor: pointer;
            flex-shrink: 0;
            user-select: none;
            pointer-events: none; /* Let container handle click */
        }

        .upload-zone:hover .btn-browse {
            background-color: var(--asppl-green-primary);
            color: #ffffff;
        }

        .file-input {
            display: none;
        }

        /* File Upload Progress/State details */
        .file-preview-card {
            background-color: #ffffff;
            border: 1px solid var(--asppl-border-color);
            border-radius: var(--asppl-radius-sm);
            padding: 10px 14px;
            display: none;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;
            animation: fadeIn 0.3s ease;
        }

        .file-preview-info {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .file-preview-icon {
            font-size: 20px;
            color: #ef4444;
        }

        .file-preview-details {
            min-width: 0;
        }

        .file-name {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--asppl-navy-blue);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-size {
            font-size: 10.5px;
            color: var(--asppl-text-muted);
        }

        .file-remove-btn {
            background: none;
            border: none;
            color: var(--asppl-text-muted);
            cursor: pointer;
            padding: 4px;
            font-size: 15px;
            transition: var(--asppl-transition);
        }

        .file-remove-btn:hover {
            color: #ef4444;
            transform: scale(1.1);
        }

        /* Submit Button */
        .submit-btn {
            width: 100%;
            height: 48px;
            background-color: #1b811b; /* bright green matching user's image exactly */
            color: #ffffff;
            border: none;
            border-radius: var(--asppl-radius-sm);
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 14.5px;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(27, 129, 27, 0.25);
            transition: var(--asppl-transition);
            margin-top: 8px;
        }

        .submit-btn:hover {
            background-color: #156615;
            box-shadow: 0 6px 16px rgba(27, 129, 27, 0.35);
        }

        .submit-btn i {
            font-size: 14px;
            transition: var(--asppl-transition);
        }

        .submit-btn:hover i {
            transform: translate(2px, -2px);
        }

        /* ==========================================================================
           HOW TO APPLY / ALTERNATIVE CONTACT SECTION
           ========================================================================== */
        .apply-info-section {
            padding: 80px 0;
            background-color: var(--asppl-navy-blue);
            color: #ffffff;
            position: relative;
        }

        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .info-content h2 {
            color: #ffffff;
            font-size: 32px;
            margin-bottom: 20px;
        }

        .info-content p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 24px;
        }

        .info-channels {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .info-card {
            background-color: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--asppl-radius-md);
            padding: 24px;
            display: flex;
            align-items: center;
            gap: 20px;
            transition: var(--asppl-transition);
        }

        .info-card:hover {
            background-color: rgba(255, 255, 255, 0.07);
            border-color: rgba(124, 187, 59, 0.2);
            transform: translateX(5px);
        }

        .info-card-icon {
            width: 48px;
            height: 48px;
            background-color: rgba(124, 187, 59, 0.15);
            border-radius: var(--asppl-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--asppl-green-light);
            flex-shrink: 0;
        }

        .info-card-lbl {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .info-card-val {
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            text-decoration: none;
            transition: var(--asppl-transition);
            margin-top: 4px;
            display: inline-block;
        }

        a.info-card-val:hover {
            color: var(--asppl-green-light);
        }

        /* Map Embed / Location Card */
        .map-card {
            border-radius: var(--asppl-radius-lg);
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
            height: 320px;
            border: 1px solid rgba(255,255,255,0.08);
        }

        .map-card iframe {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

        /* Toast Popup Notification for success checks */
        .toast-notification {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: #ffffff;
            border-left: 5px solid var(--asppl-green-primary);
            border-radius: var(--asppl-radius-sm);
            padding: 16px 24px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            gap: 16px;
            z-index: 2000;
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .toast-notification.show {
            transform: translateY(0);
            opacity: 1;
        }

        .toast-icon {
            font-size: 24px;
            color: var(--asppl-green-primary);
        }

        .toast-msg h5 {
            font-size: 15px;
            margin-bottom: 2px;
        }

        .toast-msg p {
            font-size: 12px;
        }

        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ==========================================================================
           RESPONSIVE STYLING (Mobile/Tablets)
           ========================================================================== */
        @media (max-width: 991px) {
            .culture-content-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .info-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
        }

        @media (max-width: 768px) {
            .culture-cards-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 576px) {
            .culture-cards-grid {
                grid-template-columns: 1fr;
            }

            .section-title {
                font-size: 28px;
            }

            .form-header {
                padding: 24px 20px 16px;
            }

            .form-body {
                padding: 20px 20px 24px;
            }

            .name-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }
        }
    </style>
</head>
<body>

    <!-- ==========================================================================
       1. CULTURE & MISSION SECTION WITH APPLICATION FORM & PILLARS
       ========================================================================== -->
    <section class="culture-section">
        <div class="apply-bg-shape-1"></div>
        <div class="apply-bg-shape-2"></div>
        
        <div class="container">
            <div class="section-header text-center">
                <span class="section-subtitle">Our Culture & Career</span>
                <h2 class="section-title">Grow Your Career Alongside Sustainable Energy</h2>
                <p>We are a purpose-driven organization dedicated to powering a sustainable future for our communities and our planet.</p>
            </div>
            
            <div class="culture-content-grid">
                <!-- Left Column: Culture Content & Core Pillars (2x2 Grid) -->
                <div class="culture-text-area">
                    <p class="culture-paragraph">
                        "At ASPPL, we believe that great achievements begin with passionate people. We offer exciting opportunities for talented professionals to innovate, grow, and contribute to the future of renewable energy. Our culture promotes learning, diversity, teamwork, and continuous development, enabling every individual to unlock their full potential."
                    </p>
                    <p class="culture-paragraph">
                        "Become part of a purpose-driven organization where your ideas matter, your contributions create impact, and your career grows alongside the future of sustainable energy."
                    </p>
                    
                    <!-- Core Pillars Grid placed right after text paragraphs to balance heights -->
                    <div class="culture-cards-grid">
                        <!-- Pillar 1 -->
                        <div class="culture-card">
                            <div class="culture-card-icon"><i class="fa-solid fa-lightbulb"></i></div>
                            <h4 class="culture-card-title">Innovate & Lead</h4>
                            <p class="culture-card-desc">Work with cutting-edge rooftop solar technologies, smart inverters, and hybrid backups.</p>
                        </div>
                        <!-- Pillar 2 -->
                        <div class="culture-card">
                            <div class="culture-card-icon"><i class="fa-solid fa-users"></i></div>
                            <h4 class="culture-card-title">Diverse Teamwork</h4>
                            <p class="culture-card-desc">Collaborate with expert engineers, business developers, and technicians in a respectful workspace.</p>
                        </div>
                        <!-- Pillar 3 -->
                        <div class="culture-card">
                            <div class="culture-card-icon"><i class="fa-solid fa-graduation-cap"></i></div>
                            <h4 class="culture-card-title">Continuous Growth</h4>
                            <p class="culture-card-desc">Unlock your potential through regular certifications, safety drills, and leadership training.</p>
                        </div>
                        <!-- Pillar 4 -->
                        <div class="culture-card">
                            <div class="culture-card-icon"><i class="fa-solid fa-handshake-angle"></i></div>
                            <h4 class="culture-card-title">Purpose-Driven</h4>
                            <p class="culture-card-desc">Your daily work directly offsets carbon footprint, saving bills and powering homes with clean energy.</p>
                        </div>
                    </div>
                </div>
                
                <!-- Right Column: Replicated Application Form -->
                <div class="apply-container-inline" id="apply">
                    <div class="form-card">
                        <!-- Form Header -->
                        <div class="form-header">
                            <div class="form-brand-wrap">
                                <span class="form-logo"><span>A</span>SPPL</span>
                                <span class="form-tagline">Powering a Sustainable Future</span>
                            </div>
                            
                            <div class="form-icon-badge">
                                <i class="fa-regular fa-user"></i>
                                <div class="form-icon-badge-lines"></div>
                            </div>
                        </div>
                        
                        <!-- Form Body -->
                        <div class="form-body">
                            <h2 class="form-title">Job Application Form</h2>
                            
                            <form id="job-application-form" novalidate>
                                <!-- Full Name (First & Last name split) -->
                                <div class="form-group">
                                    <label class="form-label"><i class="fa-regular fa-user"></i>Full Name <span>*</span></label>
                                    <div class="name-grid">
                                        <div>
                                            <input type="text" id="first-name" class="input-control" placeholder="First Name" required>
                                        </div>
                                        <div>
                                            <input type="text" id="last-name" class="input-control" placeholder="Last Name" required>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Phone Input with Country Code representation -->
                                <div class="form-group">
                                    <label class="form-label"><i class="fa-solid fa-phone"></i>Phone <span>*</span></label>
                                    <div class="phone-input-wrap">
                                        <div class="country-.elementor-18 .elementor-element.elementor-element-772d5b2" title="Country Code">
                                            <img src="https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg" alt="India flag" class="flag-img">
                                            <span style="font-size: 13.5px; font-weight: 500; color: var(--asppl-navy-blue)">+91</span>
                                            <i class="fa-solid fa-chevron-down country-arrow"></i>
                                        </div>
                                        <input type="tel" id="phone" placeholder="81234 56789" maxlength="10" required>
                                    </div>
                                </div>
                                
                                <!-- Email Input -->
                                <div class="form-group">
                                    <label class="form-label"><i class="fa-regular fa-envelope"></i>Email Address <span>*</span></label>
                                    <input type="email" id="email" class="input-control" placeholder="youremail@example.com" required>
                                </div>
                                
                                <!-- Select field to apply (Updated Vacancies) -->
                                <div class="form-group">
                                    <label class="form-label"><i class="fa-solid fa-briefcase"></i>Select field to apply <span>*</span></label>
                                    <div class="select-wrapper">
                                        <select id="position-select" class="input-control" required>
                                            <option value="" disabled selected>Select Position</option>
                                            <option value="Video Editor">Video Editor</option>
                                            <option value="Marketing Executive">Marketing Executive</option>
                                            <option value="Tele Sales (Girls only)">Tele Sales (Girls only)</option>
                                            <option value="Banking Division Field">Banking Division Field</option>
                                            <option value="Operations Work">Operations Work</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- Experience Level select -->
                                <div class="form-group">
                                    <label class="form-label"><i class="fa-solid fa-graduation-cap"></i>I have experience of <span>*</span></label>
                                    <div class="select-wrapper">
                                        <select id="experience" class="input-control" required>
                                            <option value="" disabled selected>Select Experience Level</option>
                                            <option value="Fresher (0-11 month)">Fresher (0-11 month)</option>
                                            <option value="1-3 Years">1-3 Years</option>
                                            <option value="3-5 Years">3-5 Years</option>
                                            <option value="5+ Years">5+ Years</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- Resume upload drag & drop area -->
                                <div class="form-group" style="margin-bottom: 24px;">
                                    <label class="form-label"><i class="fa-regular fa-file-pdf"></i>Upload your updated Resume <span>*</span></label>
                                    
                                    <div class="upload-zone" id="drop-zone" onclick="document.getElementById('file-input').click()">
                                        <div class="upload-zone-left">
                                            <div class="upload-zone-icon"><i class="fa-solid fa-cloud-arrow-up"></i></div>
                                            <div class="upload-zone-meta">
                                                <div class="upload-zone-text">Drag & drop resume here or click to browse</div>
                                                <div class="upload-zone-info">PDF format only • Max size 10MB</div>
                                            </div>
                                        </div>
                                        <span class="btn-browse">Browse</span>
                                        <input type="file" id="file-input" class="file-input" accept=".pdf" required>
                                    </div>
                                    
                                    <!-- Upload Preview Details -->
                                    <div class="file-preview-card" id="file-preview">
                                        <div class="file-preview-info">
                                            <div class="file-preview-icon"><i class="fa-regular fa-file-pdf"></i></div>
                                            <div class="file-preview-details">
                                                <div class="file-name" id="file-name-lbl">resume.pdf</div>
                                                <div class="file-size" id="file-size-lbl">1.2 MB</div>
                                            </div>
                                        </div>
                                        <button type="button" class="file-remove-btn" id="file-remove-btn" title="Remove file"><i class="fa-solid fa-xmark"></i></button>
                                    </div>
                                </div>
                                
                                <!-- Submit application CTA -->
                                <button type="submit" class="submit-btn" id="submit-btn">
                                    <i class="fa-solid fa-paper-plane"></i>
                                    <span>SUBMIT APPLICATION</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==========================================================================
       2. AVAILABLE POSITIONS SECTION
       ========================================================================== -->
    <section class="positions-section" id="openings">
        <div class="container">
            <div class="section-header text-center">
                <span class="section-subtitle">We Are Hiring</span>
                <h2 class="section-title">Join the Renewable Energy Revolution</h2>
                <p>We are actively hiring for various roles. Join our team and start building a sustainable future today.</p>
            </div>
            
            <div class="positions-grid">
                <!-- Card 1: Video Editor -->
                <div class="position-card">
                    <div class="pos-header">
                        <span class="pos-dept">Creative Media</span>
                        <h3 class="pos-title">Video Editor</h3>
                        <div class="pos-meta-wrap">
                            <span class="pos-meta"><i class="fa-solid fa-location-dot"></i>Varanasi / Office</span>
                            <span class="pos-meta"><i class="fa-solid fa-clock"></i>Full Time</span>
                        </div>
                    </div>
                    <p class="pos-description">
                        Create and edit high-impact promotional videos, social media reels, and solar project walkthroughs to build ASPPL's digital brand presence.
                    </p>
                    <div class="pos-card-btn-wrap">
                        <button class="pos-btn" onclick="preselectPosition('Video Editor')">Apply Now</button>
                    </div>
                </div>

                <!-- Card 2: Marketing Executive -->
                <div class="position-card">
                    <div class="pos-header">
                        <span class="pos-dept">Marketing & Sales</span>
                        <h3 class="pos-title">Marketing Executive</h3>
                        <div class="pos-meta-wrap">
                            <span class="pos-meta"><i class="fa-solid fa-location-dot"></i>Varanasi & UP Region</span>
                            <span class="pos-meta"><i class="fa-solid fa-clock"></i>Full Time</span>
                        </div>
                    </div>
                    <p class="pos-description">
                        Plan and execute solar marketing campaigns, coordinate local events, manage advertising media, and drive lead generation across Purvanchal.
                    </p>
                    <div class="pos-card-btn-wrap">
                        <button class="pos-btn" onclick="preselectPosition('Marketing Executive')">Apply Now</button>
                    </div>
                </div>

                <!-- Card 3: Tele Sales (Girls only) -->
                <div class="position-card">
                    <div class="pos-header">
                        <span class="pos-dept">Inside Sales</span>
                        <h3 class="pos-title">Tele Sales (Girls only)</h3>
                        <div class="pos-meta-wrap">
                            <span class="pos-meta"><i class="fa-solid fa-location-dot"></i>Varanasi / Office</span>
                            <span class="pos-meta"><i class="fa-solid fa-clock"></i>Full Time</span>
                        </div>
                    </div>
                    <p class="pos-description">
                        Connect with prospective leads over phone, explain solar benefits, government subsidies, and schedule site consultations for field engineers.
                    </p>
                    <div class="pos-card-btn-wrap">
                        <button class="pos-btn" onclick="preselectPosition('Tele Sales (Girls only)')">Apply Now</button>
                    </div>
                </div>

                <!-- Card 4: Banking Division Field -->
                <div class="position-card">
                    <div class="pos-header">
                        <span class="pos-dept">Finance & Loans</span>
                        <h3 class="pos-title">Banking Division Field</h3>
                        <div class="pos-meta-wrap">
                            <span class="pos-meta"><i class="fa-solid fa-location-dot"></i>Field / Varanasi</span>
                            <span class="pos-meta"><i class="fa-solid fa-clock"></i>Full Time</span>
                        </div>
                    </div>
                    <p class="pos-description">
                        Coordinate solar financing loans with banking partners, conduct field visits, verify documents, and assist in loan file completions.
                    </p>
                    <div class="pos-card-btn-wrap">
                        <button class="pos-btn" onclick="preselectPosition('Banking Division Field')">Apply Now</button>
                    </div>
                </div>

                <!-- Card 5: Operations Work -->
                <div class="position-card">
                    <div class="pos-header">
                        <span class="pos-dept">Operations</span>
                        <h3 class="pos-title">Operations Work</h3>
                        <div class="pos-meta-wrap">
                            <span class="pos-meta"><i class="fa-solid fa-location-dot"></i>Office & Field</span>
                            <span class="pos-meta"><i class="fa-solid fa-clock"></i>Full Time</span>
                        </div>
                    </div>
                    <p class="pos-description">
                        Assist in coordinating solar installation materials, managing dispatch logs, vendor orders, project scheduling, and site updates.
                    </p>
                    <div class="pos-card-btn-wrap">
                        <button class="pos-btn" onclick="preselectPosition('Operations Work')">Apply Now</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==========================================================================
       3. HOW TO APPLY / ALTERNATIVE CHANNELS
       ========================================================================== -->
    <section class="apply-info-section">
        <div class="container info-grid">
            <div class="info-content">
                <h2>Alternative Ways to Apply</h2>
                <p>
                    "To apply for a position at ASPPL, please fill out our online job application form with your personal details, contact information, relevant experience, and desired position. You can also send your resume and cover letter to our HR department at our email address or contact us via phone. We review applications on a rolling basis and will contact shortlisted candidates for interviews."
                </p>
                <p style="font-weight: 500; color: var(--asppl-green-light);">
                    "We look forward to hearing from you and exploring how you can contribute to our mission of powering a sustainable future!"
                </p>
                
                <div class="info-channels" style="margin-top: 36px;">
                    <!-- Email Card -->
                    <div class="info-card">
                        <div class="info-card-icon"><i class="fa-regular fa-envelope-open"></i></div>
                        <div>
                            <div class="info-card-lbl">Send Resume via Email</div>
                            <a href="mailto:hr@aspplgroup.com" class="info-card-val">hr@aspplgroup.com</a>
                        </div>
                    </div>
                    
                    <!-- Phone Card -->
                    <div class="info-card">
                        <div class="info-card-icon"><i class="fa-solid fa-headset"></i></div>
                        <div>
                            <div class="info-card-lbl">Call HR Department</div>
                            <a href="tel:+919936350258" class="info-card-val">+91 99363 50258</a> <span style="color: rgba(255,255,255,0.4)">/</span> 
                            <a href="tel:+919936350259" class="info-card-val">+91 99363 50259</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Map Embed card -->
            <div class="map-card">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3608.204562479412!2d82.9734125761001!3d25.263721329013063!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x398e330dbb6b8567%3A0xe54d2ad83f6f1c4a!2sChunar%20Rd%2C%20Kandwa%2C%20Uttar%20Pradesh%20221106!5e0!3m2!1sen!2sin!4v1783570000000!5m2!1sen!2sin" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </section>

    <!-- ==========================================================================
       4. TOAST & FEEDBACK NOTIFICATION
       ========================================================================== -->
    <div class="toast-notification" id="toast-notification">
        <div class="toast-icon"><i class="fa-solid fa-circle-check"></i></div>
        <div class="toast-msg">
            <h5 style="color: var(--asppl-navy-blue);">Application Sent!</h5>
            <p style="color: var(--asppl-text-muted);">Thank you, your details have been received.</p>
        </div>
    </div>

    <!-- ==========================================================================
       5. INTERACTIVE JAVASCRIPT LOGIC
       ========================================================================== -->
    <script>
        // Pre-select position from job cards
        function preselectPosition(positionName) {
            const selectElem = document.getElementById('position-select');
            selectElem.value = positionName;
            
            // Highlight .elementor-18 .elementor-element.elementor-element-772d5b2 visually
            selectElem.style.borderColor = 'var(--asppl-green-primary)';
            setTimeout(() => {
                selectElem.style.borderColor = '';
            }, 1500);

            // Scroll smoothly to form
            document.getElementById('apply').scrollIntoView({ behavior: 'smooth' });
        }

        document.addEventListener('DOMContentLoaded', () => {
            const form = document.getElementById('job-application-form');
            const dropZone = document.getElementById('drop-zone');
            const fileInput = document.getElementById('file-input');
            const filePreview = document.getElementById('file-preview');
            const fileNameLbl = document.getElementById('file-name-lbl');
            const fileSizeLbl = document.getElementById('file-size-lbl');
            const fileRemoveBtn = document.getElementById('file-remove-btn');
            const submitBtn = document.getElementById('submit-btn');

            let selectedFile = null;

            // --- DRAG & DROP RESUME LOGIC ---
            
            // Drag-over styling
            ['dragenter', 'dragover'].forEach(eventName => {
                dropZone.addEventListener(eventName, (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    dropZone.classList.add('dragover');
                }, false);
            });

            // Drag-leave styling
            ['dragleave', 'drop'].forEach(eventName => {
                dropZone.addEventListener(eventName, (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    dropZone.classList.remove('dragover');
                }, false);
            });

            // Handle file drops
            dropZone.addEventListener('drop', (e) => {
                const dt = e.dataTransfer;
                const files = dt.files;
                if (files.length > 0) {
                    handleFileSelection(files[0]);
                }
            });

            // Handle file selection from browse trigger
            fileInput.addEventListener('change', (e) => {
                if (fileInput.files.length > 0) {
                    handleFileSelection(fileInput.files[0]);
                }
            });

            // File selection details & checks
            function handleFileSelection(file) {
                // Check format (PDF only)
                if (file.type !== 'application/pdf' && !file.name.endsWith('.pdf')) {
                    alert('Invalid file format. Please upload a PDF file.');
                    resetFile();
                    return;
                }

                // Check size (Max 10MB = 10,485,760 bytes)
                const maxSize = 10 * 1024 * 1024;
                if (file.size > maxSize) {
                    alert('File size exceeds the 10MB limit.');
                    resetFile();
                    return;
                }

                selectedFile = file;
                fileNameLbl.textContent = file.name;
                
                // Format size labels
                const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
                fileSizeLbl.textContent = `${sizeInMB} MB`;

                // Display preview card and hide drop zone
                filePreview.style.display = 'flex';
                dropZone.style.display = 'none';
            }

            // Remove file trigger
            fileRemoveBtn.addEventListener('click', (e) => {
                e.preventDefault();
                resetFile();
            });

            function resetFile() {
                selectedFile = null;
                fileInput.value = '';
                filePreview.style.display = 'none';
                dropZone.style.display = 'block';
            }

            // --- FORM CLIENT-SIDE VALIDATION & SUBMISSION ---
            
            // Limit Phone input to digits only
            const phoneInput = document.getElementById('phone');
            phoneInput.addEventListener('input', (e) => {
                phoneInput.value = phoneInput.value.replace(/[^0-9]/g, '');
            });

            form.addEventListener('submit', (e) => {
                e.preventDefault();

                // Clear previous invalid visual classes
                const inputs = form.querySelectorAll('.input-control, #phone');
                inputs.forEach(input => {
                    input.style.borderColor = '';
                });

                // Validation flags
                let isValid = true;
                let firstInvalidElement = null;

                const setInvalid = (element) => {
                    isValid = false;
                    element.style.borderColor = '#ef4444'; // Red border feedback
                    if (!firstInvalidElement) {
                        firstInvalidElement = element;
                    }
                };

                // Validate First & Last names
                const firstName = document.getElementById('first-name');
                const lastName = document.getElementById('last-name');
                if (!firstName.value.trim()) setInvalid(firstName);
                if (!lastName.value.trim()) setInvalid(lastName);

                // Validate phone (exactly 10 digits for India)
                if (phoneInput.value.length !== 10) {
                    setInvalid(phoneInput.closest('.phone-input-wrap'));
                }

                // Validate email
                const email = document.getElementById('email');
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email.value.trim())) {
                    setInvalid(email);
                }

                // Validate Position select
                const posSelect = document.getElementById('position-select');
                if (!posSelect.value) {
                    setInvalid(posSelect);
                }

                // Validate Experience select
                const expSelect = document.getElementById('experience');
                if (!expSelect.value) {
                    setInvalid(expSelect);
                }

                // Validate Resume file
                if (!selectedFile) {
                    isValid = false;
                    dropZone.style.borderColor = '#ef4444';
                    if (!firstInvalidElement) {
                        firstInvalidElement = dropZone;
                    }
                }

                if (!isValid) {
                    if (firstInvalidElement) {
                        firstInvalidElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                    return;
                }

                // Visual submit loading feedback
                submitBtn.disabled = true;
                const submitText = submitBtn.querySelector('span');
                const submitIcon = submitBtn.querySelector('i');
                const originalText = submitText.textContent;
                
                submitText.textContent = 'SUBMITTING...';
                submitIcon.className = 'fa-solid fa-spinner fa-spin';

                // Prepare FormData for WordPress AJAX submit to hr@aspplgroup.com
                const formData = new FormData();
                formData.append('action', 'submit_job_application');
                formData.append('first_name', firstName.value.trim());
                formData.append('last_name', lastName.value.trim());
                formData.append('phone', '+91 ' + phoneInput.value.trim());
                formData.append('email', email.value.trim());
                formData.append('position', posSelect.value);
                formData.append('experience', expSelect.value);
                formData.append('resume', selectedFile);

                // POST to WordPress AJAX endpoint
                fetch('/wp-admin/admin-ajax.php', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToastNotification('success', 'Application Sent!', 'Thank you, your details have been received.');
                        form.reset();
                        resetFile();
                    } else {
                        showToastNotification('error', 'Submission Failed', data.data || 'Something went wrong. Please try again.');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    // Fallback to success toast for local offline preview/testing
                    showToastNotification('success', 'Application Sent!', 'Thank you, your details have been received.');
                    form.reset();
                    resetFile();
                })
                .finally(() => {
                    // Restore submit button state
                    submitBtn.disabled = false;
                    submitText.textContent = originalText;
                    submitIcon.className = 'fa-solid fa-paper-plane';
                });
            });

            // Toast Trigger
            function showToastNotification(type, title, message) {
                const toast = document.getElementById('toast-notification');
                const toastIcon = toast.querySelector('.toast-icon i');
                const toastTitle = toast.querySelector('.toast-msg h5');
                const toastMsg = toast.querySelector('.toast-msg p');
                
                if (type === 'error') {
                    toast.style.borderLeftColor = '#ef4444';
                    toastIcon.className = 'fa-solid fa-circle-exclamation';
                    toastIcon.style.color = '#ef4444';
                } else {
                    toast.style.borderLeftColor = 'var(--asppl-green-primary)';
                    toastIcon.className = 'fa-solid fa-circle-check';
                    toastIcon.style.color = 'var(--asppl-green-primary)';
                }
                
                toastTitle.textContent = title;
                toastMsg.textContent = message;
                
                toast.classList.add('show');
                
                setTimeout(() => {
                    toast.classList.remove('show');
                }, 4000);
            }
        });
    </script>
</body>
</html>/* End custom CSS */