.elementor-3842 .elementor-element.elementor-element-4cc7d49{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3842 .elementor-element.elementor-element-4cc7d49.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3842 .elementor-element.elementor-element-1ff3776{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.78;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-3842 .elementor-element.elementor-element-1ff3776::before, .elementor-3842 .elementor-element.elementor-element-1ff3776 > .elementor-background-video-container::before, .elementor-3842 .elementor-element.elementor-element-1ff3776 > .e-con-inner > .elementor-background-video-container::before, .elementor-3842 .elementor-element.elementor-element-1ff3776 > .elementor-background-slideshow::before, .elementor-3842 .elementor-element.elementor-element-1ff3776 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3842 .elementor-element.elementor-element-1ff3776 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://continuumrc.com/wp-content/uploads/2025/07/We-are-hiting-2-1.webp");--background-overlay:'';background-size:cover;}.elementor-3842 .elementor-element.elementor-element-79c2350 > .elementor-widget-container{margin:160px 0px 0px 0px;padding:50px 0px 0px 0px;}.elementor-3842 .elementor-element.elementor-element-79c2350 .elementor-heading-title{font-family:"Poppins", Sans-serif;color:#000000;}.elementor-3842 .elementor-element.elementor-element-20b42e2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3842 .elementor-element.elementor-element-dc0ca7b{--display:flex;}.elementor-3842 .elementor-element.elementor-element-a31de3b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3842 .elementor-element.elementor-element-6644717{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-field-group > label, .elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-field-subgroup label{color:#000000;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-field-group > label{font-family:"Poppins", Sans-serif;font-weight:bold;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-field-type-html{padding-bottom:0px;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .e-form__buttons__wrapper__button-next{background-color:#1B5FC1;color:#ffffff;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-button[type="submit"]{background-color:#1B5FC1;color:#ffffff;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-3842 .elementor-element.elementor-element-43cf5b1 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-3842 .elementor-element.elementor-element-43cf5b1{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}#elementor-popup-modal-3842{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-3842 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-3842 .dialog-close-button{display:flex;}#elementor-popup-modal-3842 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}@media(max-width:767px){.elementor-3842 .elementor-element.elementor-element-1ff3776{--margin-top:124px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3842 .elementor-element.elementor-element-79c2350 > .elementor-widget-container{margin:4px 0px 0px 0px;padding:0px 0px 0px 17px;}}@media(min-width:768px){.elementor-3842 .elementor-element.elementor-element-4cc7d49{--width:96.875%;}}/* Start custom CSS for heading, class: .elementor-element-79c2350 */<style>
  .crc-form-container {
    max-width: 750px;
    margin: 40px auto;
    padding: 30px;
    background-color: #f8f9fb;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  .crc-form-container h2 {
    text-align: center;
    color: #004080;
    margin-bottom: 25px;
  }
  .crc-form-group {
    margin-bottom: 20px;
  }
  .crc-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
  }
  .crc-form-group input,
  .crc-form-group select,
  .crc-form-group textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 15px;
    box-sizing: border-box;
  }
  .crc-form-group textarea {
    resize: vertical;
    min-height: 120px;
  }
  .crc-checkbox {
    margin-right: 10px;
  }
  .crc-form-submit {
    text-align: center;
    margin-top: 30px;
  }
  .crc-form-submit input {
    background-color: #005eab;
    color: #fff;
    padding: 12px 30px;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .crc-form-submit input:hover {
    background-color: #004080;
  }
  
  .qualification-entry, .experience-entry {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #ffffff;
    position: relative;
  }
  
  .add-more-btn {
    background-color: #28a745;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
  }
  
  .add-more-btn:hover {
    background-color: #218838;
  }
  
  .remove-btn {
    background-color: #dc3545;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    position: absolute;
    top: 10px;
    right: 10px;
    transition: background-color 0.3s ease;
  }
  
  .remove-btn:hover {
    background-color: #c82333;
  }
  
  .section-header {
    color: #004080;
    font-weight: bold;
    margin-bottom: 15px;
    border-bottom: 2px solid #004080;
    padding-bottom: 5px;
  }
  
  .row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }
  
  .col-half {
    flex: 1;
    min-width: 240px;
  }
  
  .qualification-entry h4, .experience-entry h4 {
    margin: 0 0 10px 0;
    color: #004080;
    font-size: 16px;
  }
</style>

<div class="crc-form-container">
  <h2>Continuum Research Center – Application Form</h2>
  <form action="YOUR_FORM_HANDLER_URL_HERE" method="post" enctype="multipart/form-data" novalidate>
    
    <div class="crc-form-group">
      <label>Full Name *</label>
      <input type="text" name="FullName" required>
    </div>
    
    <div class="crc-form-group">
      <label>Email Address *</label>
      <input type="email" name="Email" required>
    </div>

    <div class="crc-form-group">
      <label>Phone Number *</label>
      <input type="tel" name="Phone" required>
    </div>

    <div class="crc-form-group">
      <label>What are you applying for? *</label>
      <select name="Position" required>
        <option value="">-- Select Position --</option>
        <option>Internship (Clinical Research)</option>
        <option>Clinical Research Assistant</option>
        <option>Medical Writing Assistant</option>
        <option>Biostatistics Intern</option>
        <option>Regulatory Support Staff</option>
        <option>Other</option>
      </select>
    </div>

    <div class="crc-form-group">
      <div class="section-header">Educational Background</div>
      <div id="qualifications-container">
        <div class="qualification-entry">
          <h4>Most Recent Qualification *</h4>
          <div class="row">
            <div class="col-half">
              <label>Degree *</label>
              <select name="Qualification_1" required>
                <option value="">-- Select Qualification --</option>
                <option>Pharm D</option>
                <option>BS Biotechnology</option>
                <option>BS Biochemistry</option>
                <option>MS Clinical Pharmacy</option>
                <option>MPH / MSc Epidemiology</option>
                <option>Other</option>
              </select>
            </div>
            <div class="col-half">
              <label>Institution *</label>
              <input type="text" name="Institution_1" required>
            </div>
          </div>
          <div class="row">
            <div class="col-half">
              <label>Year of Completion *</label>
              <input type="number" name="Year_1" min="1990" max="2030" required>
            </div>
            <div class="col-half">
              <label>Grade/CGPA</label>
              <input type="text" name="Grade_1" placeholder="e.g. 3.5/4.0 or 85%">
            </div>
          </div>
        </div>
      </div>
      <button type="button" class="add-more-btn" onclick="addQualification()">+ Add Another Qualification</button>
    </div>

    <div class="crc-form-group">
      <div class="section-header">Work Experience</div>
      <div id="experience-container">
        <div class="experience-entry">
          <h4>Most Recent Experience</h4>
          <div class="row">
            <div class="col-half">
              <label>Job Title</label>
              <input type="text" name="JobTitle_1" placeholder="e.g. Research Assistant">
            </div>
            <div class="col-half">
              <label>Company/Organization</label>
              <input type="text" name="Company_1">
            </div>
          </div>
          <div class="row">
            <div class="col-half">
              <label>Start Date</label>
              <input type="month" name="StartDate_1">
            </div>
            <div class="col-half">
              <label>End Date</label>
              <input type="month" name="EndDate_1">
            </div>
          </div>
          <div class="crc-form-group">
            <label>Job Description</label>
            <textarea name="JobDescription_1" placeholder="Brief description of your role and responsibilities"></textarea>
          </div>
        </div>
      </div>
      <button type="button" class="add-more-btn" onclick="addExperience()">+ Add Another Experience</button>
    </div>

    <div class="crc-form-group">
      <label>Preferred Location *</label>
      <select name="Location" required>
        <option value="">-- Select --</option>
        <option>Wah Cantt</option>
        <option>Rawalpindi</option>
        <option>Lahore</option>
        <option>Islamabad</option>
        <option>Abbottabad</option>
        <option>Online / Remote</option>
      </select>
    </div>

    <div class="crc-form-group">
      <label>Upload CV (Only PDF/DOC/DOCX)</label>
      <input type="file" name="CV" accept=".pdf,.doc,.docx">
    </div>

    <div class="crc-form-group">
      <label>Expected Availability Date *</label>
      <input type="date" name="Availability" required>
    </div>

    <div class="crc-form-group">
      <label>How did you hear about us?</label>
      <select name="Source">
        <option value="">-- Select --</option>
        <option>Social Media</option>
        <option>Referral</option>
        <option>University</option>
        <option>Job Posting</option>
        <option>Other</option>
      </select>
    </div>

    <div class="crc-form-group">
      <label>Cover Letter / Motivation</label>
      <textarea name="Message" placeholder="Briefly explain why you want to join CRC and what you bring to the team."></textarea>
    </div>

    <div class="crc-form-submit">
      <input type="submit" value="Submit Application">
    </div>
  </form>
</div>

<script>
  let qualificationCount = 1;
  let experienceCount = 1;
  
  function addQualification() {
    qualificationCount++;
    const container = document.getElementById('qualifications-container');
    const newQualification = document.createElement('div');
    newQualification.className = 'qualification-entry';
    newQualification.innerHTML = `
      <button type="button" class="remove-btn" onclick="removeQualification(this)">Remove</button>
      <h4>Additional Qualification</h4>
      <div class="row">
        <div class="col-half">
          <label>Degree</label>
          <select name="Qualification_${qualificationCount}">
            <option value="">-- Select Qualification --</option>
            <option>Pharm D</option>
            <option>BS Biotechnology</option>
            <option>BS Biochemistry</option>
            <option>MS Clinical Pharmacy</option>
            <option>MPH / MSc Epidemiology</option>
            <option>Other</option>
          </select>
        </div>
        <div class="col-half">
          <label>Institution</label>
          <input type="text" name="Institution_${qualificationCount}">
        </div>
      </div>
      <div class="row">
        <div class="col-half">
          <label>Year of Completion</label>
          <input type="number" name="Year_${qualificationCount}" min="1990" max="2030">
        </div>
        <div class="col-half">
          <label>Grade/CGPA</label>
          <input type="text" name="Grade_${qualificationCount}" placeholder="e.g. 3.5/4.0 or 85%">
        </div>
      </div>
    `;
    container.appendChild(newQualification);
  }

  function addExperience() {
    experienceCount++;
    const container = document.getElementById('experience-container');
    const newExperience = document.createElement('div');
    newExperience.className = 'experience-entry';
    newExperience.innerHTML = `
      <button type="button" class="remove-btn" onclick="removeExperience(this)">Remove</button>
      <h4>Additional Experience</h4>
      <div class="row">
        <div class="col-half">
          <label>Job Title</label>
          <input type="text" name="JobTitle_${experienceCount}" placeholder="e.g. Research Assistant">
        </div>
        <div class="col-half">
          <label>Company/Organization</label>
          <input type="text" name="Company_${experienceCount}">
        </div>
      </div>
      <div class="row">
        <div class="col-half">
          <label>Start Date</label>
          <input type="month" name="StartDate_${experienceCount}">
        </div>
        <div class="col-half">
          <label>End Date</label>
          <input type="month" name="EndDate_${experienceCount}">
        </div>
      </div>
      <div class="crc-form-group">
        <label>Job Description</label>
        <textarea name="JobDescription_${experienceCount}" placeholder="Brief description of your role and responsibilities"></textarea>
      </div>
    `;
    container.appendChild(newExperience);
  }

  function removeQualification(button) {
    button.parentElement.remove();
  }

  function removeExperience(button) {
    button.parentElement.remove();
  }
</script>/* End custom CSS */