<head>
    <link rel="canonical" href="https://ombrellacompany.com/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- font -->
    <!-- font -->
    <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=DM+Serif+Display:ital@0;1&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap" rel="stylesheet">
    <style>
        section h1, 
        section h2, 
        section h3, 
        section h4, 
        section h5 {
            font-family: "DM Serif Display", serif;
            font-weight: 300;
        }

        #why .shape-bottom svg {
            height: 200px; /* Adjust as needed */
        }
        #home .shape-bottom svg {
            height: 200px; /* Adjust as needed */
        }
        #services .shape-bottom svg {
            height: 110px; /* Adjust as needed */
        }
        #home h2 {
            font-size: 35px;
            text-align: center;
        }
        #three-features h1{
            font-size: 46px;
        }
        #three-features h5{
            font-size: 28px;
            font-weight: bold;
        }
        #three-features p{
            font-size: 22px;
            font-weight: normal;
        }
        #contact {
            height:135vh
        }
       
        .btn-customs {
            font-size: 18px;  /* Adjust text size */
            padding: 12px 24px; /* Increase button padding */
            width: 200px;  /* Fixed width */
            height: 50px;  /* Fixed height */
        }
        

        .container-fluid {
            padding-left: 1.8rem !important;
            padding-right: 1.8rem !important;
        }
        .row {
            margin-left: 30px !important;
            margin-right: 30px !important;
        }

         .card-custom {
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            padding: 20px;
        }
        .loading-spinner {
            display: none;
        }
        .pdf-frame {
            border: none;
            height: 80vh; /* Make the iframe take most of the viewport height */
        }
        .threebox-content{
            font-size: 36px;
            color: #9238E3;
            margin-bottom: 10px;
        }
        .threebox-content-para{
            text-align: justify;
            margin-bottom: 20px;
            font-weight: normal;
        }
        .half-bg {
          background: #D698D6; /* Purple background color */
          background: radial-gradient(circle, #D698D6 0%, #42275a 100%); /* Gradient background */
          /* Add other necessary styles */
        }
        
        /* Button Styling */
        .submit-btn {
            width: 200px;
            height: 67px;
            font-size: 18px;
            text-align: center;
            border-radius: 50px;
        }
        
        .multi-cards h1 {
            font-size: 46px;
        }

        .multi-cards .card {
            padding-top: 20px;
            position: relative;
            overflow: hidden;
            text-align: center;
            background: transparent;
            border: none;
            transition: all 0.3s ease-in-out;
            height: 360px; /* Fixed height */
            border-radius: 20px;
            box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15),  /* Bottom shadow */
                        0px -6px 15px rgba(0, 0, 0, 0.15), /* Top shadow (Increased) */
                        6px 0px 15px rgba(0, 0, 0, 0.15),  /* Right shadow */
                        -6px 0px 15px rgba(0, 0, 0, 0.15); /* Left shadow */
        }

        
        .multi-cards .card-body {
            position: relative;
            padding: 25px;
            text-align: center;
            height: 100%;
        }
        
        .multi-cards .card .card-title {
            padding-top: 33px;
            color: #9238E3;
            font-size: 35px;
            transition: transform 0.3s ease-in-out;
            font-family: "DM Serif Display", serif;
        }
        
        /* Card Text: Show only first line by default */
        .multi-cards .card .card-text {
            white-space: nowrap; /* Keeps text in a single line */
            text-overflow: ellipsis;
            overflow: hidden;
            max-height: 1.5em; /* Ensure only one line is visible */
            opacity: 1;
            transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, max-height 0.4s ease-in-out;
            font-size: 20px;
        }
        
        /* Button (Initially Hidden) */
        .multi-cards .btn {
            opacity: 0;
            font-weight: normal;
            background-color: #9C42E7;
            transform: translateY(20px); /* Move down */
            transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
            margin-top: 25px; /* Space between text and button */
            display: inline-block;
            font-size: 30px;
        }

        .custom-btn1 {
            height: 58px; /* Set desired height */
            border:none; 
            border-radius: 25px; color:#8830df;
            font-size: 30px;
            margin: 20px 0;
        }
        
        /* Hover Effect */
        .multi-cards .card:hover .card-title {
            transform: translateY(-20px); /* Move title up */
        }
        
        .multi-cards .card:hover .card-text {
            white-space: normal; /* Allow multiple lines */
            max-height: 100px; /* Expand to show full text */
            transform: translateY(-20px); /* Move up */
            opacity: 1;
        }
        
        .multi-cards .card:hover .btn {
            opacity: 1;
            transform: translateY(-20px); /* Move up */
            opacity: 1;
        }

        .industry h1 {
            font-size: 26px;
        }
        .contact-fields .contact-head {
                font-size: 30px;
            }
         
        /*    popup css    */
        
        /* Modal Background */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1000; 
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
        }
        
        /* Modal Content */
        .modal-content {
            background-color: white;
            margin: 10px auto;
            padding: 20px;
            border-radius: 10px;
            width: 300px;
            max-width: 400px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        /* Close Button */
        .close {
            float: right;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }
        
        
        /*  end  popup css    */
        
        /*  dynamic changing text    */
        .headline {
            font-size: 2rem;
            text-align: center;
            font-weight: normal;
        }
        
        #dynamic-text {
            font-weight: normal;
            color: #FFDD44; /* Change color if needed */
        }
        
        .cursor {
            display: inline-block;
            font-size: 2rem;
            color: #007bff;
            animation: blink 0.7s infinite;
        }
        
        @keyframes blink {
            50% {
                opacity: 0;
            }
        }
        /*  end dynamic text   */
        
        
        #pdfContainer {
            position: relative;
            top: 0;
            right: 0;
            width: 50%; /* Adjust based on your layout */
            overflow: hidden;
            display: none; /* Keep this to hide initially */
            background: white;
            z-index: 1000;
            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
             height: 90vh;
        }
        
        #pdfViewer {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        /* For mobile responsiveness */
        @media (max-width: 768px) {
            #pdfContainer {
                width: 100%; /* Full width on mobile */
            }
            .modal-content {
                width: 90%;
            }
            #home .shape-bottom svg {
            height: 100px; /* Adjust as needed */
            }
            html, body {
                overflow-x: hidden;
                width: 100%;
            }
            html, body {
                overflow-x: hidden;
                width: 100%;
            }
             .container-fluid {
                    padding-left: 10px !important;
                    padding-right: 10px !important;
                }
        
                .row {
                margin-left: 0 !important;
                margin-right: 0 !important;
                padding-left: 10px !important;
                padding-right: 10px !important;
            }
            /* Hide the image */
            .welcome-thumb-wrapper {
                display: none !important;
            }
            
            .multi-cards h1 {
                font-size: 18px;
            }
            .multi-cards .card .card-title {
                font-size: 30px;
            }
            .multi-cards .card {
                height: 380px;
            }
            
            /* Ensure the text in .carousel-inner moves down */
            .welcome-intro {
                margin-top: 100px; /* Adjust this value as needed */
            }
            
            /* Ensure the text is properly aligned */
            .carousel-inner {
                text-align: center;
                padding-top: 50px; /* Adjust this value if needed */
            }
            
            .benefits{
                padding: 0 10px;
            }
            /* Button Styling */
            .submit-btn {
                width: 170px;
                height: 65px;
                font-size: 12px;
                text-align: center;
                border-radius: 50px;
            }
            .faq-content{
                padding-top: 5rem;
            }
            .contact-fields .contact-head{
                font-size: 18px;
            }
            .custom-btn1 {
            width: 100; /* Set desired width */
            height: 50; /* Set desired height */
            border:none; 
            border-radius: 25px; color:#8830df;
            font-size: 18px;
            margin: 20px 0;
            }
        
            #contact input {
                width: 200px;
            }
            #contact textarea {
                width: 200px;
                height: 50px;
            }
            #contact .g-recaptcha {
            transform: scale(0.8); /* Adjust the scale factor as needed */
            transform-origin: left center; /* Ensures it scales properly */
            }
            
            #contact {
            height: 180vh !important; /* Increase height for mobile */
            min-height: 100vh; /* Ensures it fills the screen */
            padding: 60px 15px;
            background-size: cover;
            background-position: center;
            }

            #contact .shape-top svg,
            #contact .shape-bottom svg {
                height: 120px; /* Increase the height of the wave SVGs */
                width: 100%;
            }
        
            #contact .shape-top {
                top: 0;
            }
        
            #contact .shape-bottom {
                bottom: 0;
            }
            #three-features h1{
                    font-size: 22px;
            }
                #pdfSection {
                flex-direction: column;
            }
            /* FOR THREE FEATURES  */
              .no-mobile-stack > [class^="col-"] {
                flex: 0 0 33.3333%;
                max-width: 33.3333%;
              }
              .no-mobile-stack {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin: 0 !important;
                -webkit-overflow-scrolling: touch;
              }
                .no-mobile-stack h1 {
                font-size: 18px !important;
              }
            
              .no-mobile-stack h5 {
                font-size: 14px !important;
              }
            
              .no-mobile-stack p,
              .no-mobile-stack button {
                font-size: 13px !important;
              }
            
              .no-mobile-stack i {
                font-size: 14px !important;
              }
            
              .no-mobile-stack .custom-btn1 {
                font-size: 13px !important;
                padding: 8px 12px;
              }
              .no-mobile-stack .container-fluid {
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin: 0 !important;
                width: 100vw;
              }
            
              .no-mobile-stack .row {
                margin: 0 !important;
                padding: 0 !important;
              }
            
              .no-mobile-stack .col-md-4 {
                padding: 0 5px; /* Adjust as needed */
              }
              /* END FOR THREE FEATURES  */
        }
        
    /* iPhone SE / Very small screens */
    @media (max-width: 375px) {
      /* Styles for very small phones */
       #pdfContainer {
        width: 100% !important;
        height: 100vh !important;
        float: none !important;
      }
    
      #pdfViewer {
        width: 100% !important;
        height: 100vh !important;
      } 
    }
    
    /* Small Phones: iPhone 6/7/8, Galaxy S5 */
    @media (min-width: 376px) and (max-width: 414px) {
      /* Styles for small phones */
       #pdfContainer {
        width: 100% !important;
        height: 100vh !important;
        float: none !important;
      }
    
      #pdfViewer {
        width: 100% !important;
        height: 100vh !important;
      } 
    }
    
    /* Medium Phones: Pixel 4, iPhone 11, Galaxy S8/S9/S10 */
    @media (min-width: 415px) and (max-width: 540px) {
      /* Styles for medium phones */
             #pdfContainer {
        width: 100% !important;
        height: 100vh !important;
        float: none !important;
      }
    
      #pdfViewer {
        width: 100% !important;
        height: 100vh !important;
      } 
    }
    
    /* Large Phones: iPhone 12 Pro Max, Galaxy Note */
    @media (min-width: 541px) and (max-width: 767px) {
      /* Styles for large phones and phablets */
         #pdfContainer {
        width: 100% !important;
        height: 100vh !important;
        float: none !important;
      }
    
      #pdfViewer {
        width: 100% !important;
        height: 100vh !important;
      } 
    }
    
    /* Tablets: iPads, small landscape tablets */
    @media (min-width: 768px) and (max-width: 1024px) {
      /* Styles for tablets */
        
       #pdfContainer {
        width: 100% !important;
        height: 100vh !important;
        float: none !important;
      }
    
      #pdfViewer {
        width: 100% !important;
        height: 100vh !important;
      } 
      }
    }
    
    /* Landscape Mobile Devices */
    @media (max-height: 500px) and (orientation: landscape) {
      /* Styles for landscape phones */
       #pdfContainer {
        width: 100% !important;
        height: 100vh !important;
        float: none !important;
      }
    
      #pdfViewer {
        width: 100% !important;
        height: 100vh !important;
      } 
    }

    </style>
    <?php include 'analytics.php'; ?>
</head>

<?php include "header.php"; ?>
        <!-- ***** Welcome Area Start ***** -->
<section id="home" class="section welcome-area bg-overlay overflow-hidden d-flex align-items-center">
            <div class="container">
                <div class="row align-items-center">
                    <!-- Welcome Intro Start -->
                    
                    <div class="col-12 col-md-6">
                    <?php
    $rr=mysqli_query($con,"SELECT * FROM static");
$r = mysqli_fetch_row($rr);
$stitle = $r[1];
$stext=$r[2];
?>
                        <div class="welcome-intro mt-5">
							<div id="" class="" data-ride="">
							  <div class=" py-3">
								<div class="">
									<h2 class="headline text-white" style="font-weight: 300;">
                                        We are the UK’s most contractor <br />
                                        <span id="dynamic-text"></span>
                                        <span class="cursor">|</span> umbrella company.
                                    </h2>

								</div>
							  </div>
							</div>
								<div class="mobile-only text-center" style="display: none;">
                                  <!-- Your mobile-only content here -->
                                  <img class="navbar-brand-regular mt-4" style="height:65px; width:130px;" src="dashboard/uploads/logo/passport transparent.webp" alt="new-brand">
                                </div>
                        </div>
                    </div>
                    <div class="text-center col-12 col-md-2">
                        
                    </div>
                    <div class="col-12 col-md-4">
                        <!-- Welcome Thumb -->
                        <div class="welcome-thumb-wrapper mt-5 mt-md-0">
                            <span class="welcome-thumb-1">
                                <img class="welcome-animation d-block ml-auto" style="height:360px; width:320px;" src="assets/img/welcome/thumb_compressed.webp" alt="">
                                <div class="text-center d-flex justify-content-center">
                                    <img class="navbar-brand-regular mt-4" style="height:95px; width:209px;" src="dashboard/uploads/logo/passport transparent.webp" alt="new-brand">
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Shape Bottom -->
            <div class="shape shape-bottom">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" fill="#FFFFFF">
                    <path class="shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
        c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
        c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
                </svg>
            </div>
        </section>
        
        <!--====== Fetch calculator constant values from phpmyadmin ======-->

		<?php
		// Database connection
        $servername = "localhost:3306";
		$username = "veerorwl_ombrelladb";
		$password = "B4D6[Zh{CbU.";
		$database = "veerorwl_ombrella"; 
		
		//Local Database connection
    	/*	$servername = "localhost";
		$username = "root";
		$password = "";
		$database = "ombrella"; */

		// Create connection
		$conn = new mysqli($servername, $username, $password, $database);

		// Check connection
		if ($conn->connect_error) {
			die("Connection failed: " . $conn->connect_error);
		}

		// SQL query to fetch data from the table
		$sql = "SELECT * FROM calculator_const_values";
		$result = $conn->query($sql);

		$fees = 0;
		$mileage_expenses = 0;
		$ni_secondary = 0;
		$ni_rate = 0;
		$primary_threshold = 0;
		$upperlimit_uel = 0;
		$incomebt_primary_uel = 0;
		$income_inexcess = 0;
		$weeksinyear = 0;
		$personal_allowance = 0;
		$firstband = 0;
		$secondband = 0;
		$taxable_amount = 0;
		$basic_tax = 0;
		$higher_tax = 0;
		$additional_tax = 0;
		// Check if there are any rows in the result
		if ($result->num_rows > 0) {
			// Output data of each row
			while($row = $result->fetch_assoc()) {
				// Display the data
				$fees = $row["fees"];
				$mileage_expenses = $row["mileage_expenses"];
				$ni_secondary = $row["ni_secondary"];
				$ni_rate = $row["ni_rate"];
				$primary_threshold = $row["primary_threshold"];
				$upperlimit_uel = $row["upperlimit_uel"];
				$incomebt_primary_uel = $row["incomebt_primary_uel"];
				$income_inexcess = $row["income_inexcess"];
				$weeksinyear = $row["weeksinyear"];
				$personal_allowance = $row["personal_allowance"];
				$firstband = $row["firstband"];
				$secondband = $row["secondband"];
				$taxable_amount = $row["taxable_amount"];
				$basic_tax = $row["basic_tax"];
				$higher_tax = $row["higher_tax"];
				$additional_tax = $row["additional_tax"];
				
				// Display other fields similarly
			}
		} else {
			echo "0 results";
		}

		// Close connection
		$conn->close();
		?>
        
        <!--======  End  ======-->
     <section>
         <div class="container-fluid px-4">
             <div class="row text-center d-flex justify-content-center mt-5">
					<div class="">
					    <div class="card card-custom">
						<div id="formContainer">
						<h4 class="card-title text-center mt-4" style="font-family: 'Roboto', sans-serif; color:#BB07B3;">UMBRELLA COMPANY CALCULATOR</h4>
							<p class=" text-center mt-3 mb-5" style="font-size:18px; font-weight:normal; font-family: "DM Serif Text", serif;>Most accurate and upto date Umbrella Company Calculator.</p>
							<form id="userForm">
							    
								<div class="form-group row px-3">
									<label for="name" class="col-sm-4 col-form-label" style="font-size: 13px;font-family: 'Roboto', sans-serif;">Hourly Rate</label>
									<div class="col-sm-8">
										<span class="position-absolute top-0 pound-symbol h-100 px-2 d-flex align-items-center left-m-5px-m" style="font-size: 12px;">£  </span>
										<input type="number" class="form-control pl-5" id="inputNumber" style="height: 35px;" step="any" required>
									</div>
								</div>
								
								<div class="form-group row px-3">
                                    <label for="paymentFrequency" class="col-sm-4 col-form-label" style="font-size: 13px;font-family: 'Roboto', sans-serif;">Frequency:</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" id="Hoursworked" style="height: 50px;">
                                            <option value="37.5">Weekly</option>
                                            <option value="150">Monthly</option>
                                        </select>
                                    </div>
                                </div>

                                    <div class="text-center">
								        <button type="submit" id="viewPdfBtn" class="btn btn-primary mt-3" style="border-radius: 20px; background-color:darkblue; color:white; font-family: 'Roboto', sans-serif; font-size:16px;" onclick="combineResults()">Calculate</button>
								    </div>
							</form>

							<div class="loading-spinner text-center mt-3">
								<div class="spinner-border" role="status">
									<span class="sr-only">Loading...</span>
								</div>
							</div>
						</div>
						
						<!--  After clicking calculate button display the result  -->
						<div id="resultContainer" style="display: none;">
                            <button class="btn btn-secondary mb-5 mt-2 d-block w-auto" onclick="showForm()"><i class="fas fa-long-arrow-alt-left"></i></button>
							<h3 id="incomeHeading" class="card-title text-center mt-2" style="font-family: 'DM Serif Text', serif;">
                                YOUR ESTIMATED INCOME
                            </h3>

							<p class="text-center mb-5" style="font-size: 12px; font-size:18px; font-family: "DM Serif Text", serif;">We guarantee same-day payments and maximum savings.</p>
						
						
							<div class="form-group">
								<div class="input-group">
									<span class="input-group-text pr-2" style="font-size:20px; font-family: 'Roboto', sans-serif; font-weight:bold;">Net Pay</span>
									<span class="input-group-text" style="font-size:20px; font-family: 'Roboto', sans-serif; font-weight:bolder;">£</span>
									<input type="text" style="font-weight: bold; font-size:20px;" class="form-control" id="result" readonly>
								</div>
								<!-- COMMENTED THE PAYSLIP BUTTON
								<div class="text-center">
									<button id="viewPdfBtn" class="btn btn-primary mt-5" style="border-radius: 20px; background-color:darkblue; color:white; font-family: 'Roboto', sans-serif; font-size:16px;">Payslip</button>
								</div> -->
								
								<!-- Bootstrap Modal for PDF -->
                                <div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="pdfModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="pdfModalLabel">Payslip Preview</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <iframe id="pdfFrame" src="" width="100%" height="500px"></iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>
							</div>
						</div>
					</div>
					</div>
					
                    <!-- Right Column (PDF iFrame) -->
                    <div id="pdfContainer" style="">
                      <iframe id="pdfViewer" name="pdfViewerFrame" src="/web/viewer.html?file=ombrella_payslip.php"></iframe>
                      <noscript>
                        Your browser doesn't support viewing PDF.
                        <a href="ombrella_payslip.php" target="_blank">Download here</a>.
                      </noscript>
                    </div>
                    <!--END Right Column (PDF iFrame) -->
                    
					<div id="resultContainer" style="display: none;">
						<button class="btn btn-secondary mb-3" onclick="showForm()">Back</button>
						<h5 class="card-title text-center">Result</h5>
						<p id="resultName"></p>
						<p id="resultHours"></p>
					</div>
				</div>
         </div>
     </section> 

<section id="why" class="section mt-5 service-area bg-grey ptb_150">
    <!-- Shape Top -->
            <div class="shape shape-top">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" fill="#FFFFFF">
                    <path class="shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
                c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
                c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
                </svg>
            </div>
    <div class="container-fluid px-4">
        <div class="row">
            <h1 class="threebox-content">Same day umbrella</h1>
            <p class="threebox-content-para">
                At Ombrella, we bring a fresh approach to efficiency with our streamlined, hassle-free setup. In just a few minutes, you can be on board with a fast-growing umbrella company. Submit your timesheet any day in the morning, and by the end of the day, not only will we have invoiced your client, but your payslip will be ready. You'll receive your payment the same day, ensuring a seamless experience without additional fees. Our goal is simple: to provide fast, transparent, and reliable service for modern contractors.
            </p>
            
            <h1 class="threebox-content">Compliant, trusted, established</h1>
            <p class="threebox-content-para">
                "Your Trust, Our Foundation: Building Excellence from Day One." As an ambitious company, our commitment to compliance is unwavering. We follow industry best practices and ensure full adherence to regulations, striving to set a new benchmark in transparency and ethical service. Contractors trust us because we prioritize their needs and offer a modern approach to umbrella solutions. Choose Ombrella, where innovation meets compliance.
            </p>
            
            <h1 class="threebox-content">3 months free trial</h1>
            <p class="threebox-content-para">
                "Experience the Ombrella Difference with Our No-Obligation, 3-Month Free Trial!" We are confident in the value and quality of our services, and to prove it, we are offering all new joiners a 3-month free trial with no strings attached. This is more than an offer—it’s our way of welcoming you to a better, more efficient umbrella experience. Join the growing number of contractors who have discovered the Ombrella advantage. Start your journey with us today!
            </p>
		</div>
    </div>
    <!-- Shape Bottom -->
            <div class="shape shape-bottom">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 150" preserveAspectRatio="none" fill="#FFFFFF">
                    <path class="shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
        c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
        c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
                </svg>
            </div>
</section>
        <!-- ***** Promo Area End ***** -->

     <!--====== Multiple Cards Section ======-->
    <section class="multi-cards my-3">
        <h1 class="text-center mb-5">We Value You And Your Time</h1>
        <div class="container-fluid px-4">
            <!--====== First row ======-->
            <div class="row">
                <!-- Card 1 -->
                <div class="col-md-4">
                    <div class="card shadow">
                        <div class="card-body text-center">
                            <h5 class="card-title">10 Minutes <br> Quick Sign up</h5>
                            <p class="card-text">Sign up in just 10 minutes no long forms, no unnecessary steps. Get started instantly and focus on what truly matters.</p>
                            <a href="#contact" class="btn btn-primary w-100" onclick="showForm1()">Join Us</a>
                        </div>
                    </div>
                </div>
    
                <!-- Card 2 -->
                <div class="col-md-4">
                    <div class="card shadow">
                        <div class="card-body text-center">
                            <h5 class="card-title">60 Minutes<br> Quick On Boarding</h5>
                            <p class="card-text">Complete your onboarding in 60 minutes—no waiting, no stress. A hassle-free process designed for contractors.</p>
                            <a href="#contact" class="btn btn-primary w-100" onclick="showForm1()">Join Us</a>
                        </div>
                    </div>
                </div>
    
                <!-- Card 3 -->
                <div class="col-md-4">
                    <div class="card shadow">
                        <div class="card-body text-center">
                            <h5 class="card-title">60 Minutes <br> Quick Payment</h5>
                            <p class="card-text">Your money reaches your account within an hour—no delays, no uncertainty. Get paid the same day, every time.</p>
                            <a href="#contact" class="btn btn-primary w-100" onclick="showForm1()">Join Us</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--====== Second row ======-->
            <div class="row mt-4">
                <!-- Card 1 -->
                <div class="col-md-4">
                    <div class="card shadow">
                        <div class="card-body text-center">
                            <h5 class="card-title">2 Hours <br> Quick Invoicing</h5>
                            <p class="card-text">Invoices are processed in just 2 hours no waiting, no complications. Stay on top of your earnings effortlessly. <br><br></p>
                            <a href="#contact" class="btn btn-primary w-100" onclick="showForm1()">Join Us</a>
                        </div>
                    </div>
                </div>
    
                <!-- Card 2 -->
                <div class="col-md-4">
                    <div class="card shadow">
                        <div class="card-body text-center">
                            <h5 class="card-title">03 Months <br> Free Service</h5>
                            <p class="card-text">Experience Ombrella free for 3 months—no hidden costs, no commitments. Enjoy our premium service risk-free.</p>
                            <a href="#contact" class="btn btn-primary w-100" onclick="showForm1()">Join Us</a>
                        </div>
                    </div>
                </div>
    
                <!-- Card 3 -->
                <div class="col-md-4">
                    <div class="card shadow">
                        <div class="card-body text-center">
                            <h5 class="card-title">2 hours Instant Payment Processing</h5>
                            <p class="card-text">Payroll is processed every day—no missed deadlines, no last-minute stress. Your payment is ready in just 2 hours.</p>
                            <a href="#contact" class="btn btn-primary w-100" onclick="showForm1()">Join Us</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--====== Third row ======-->
            <div class="row mt-4">
                <!-- Card 1 -->
                <div class="col-md-4">
                    <div class="card shadow">
                        <div class="card-body text-center">
                            <h5 class="card-title">Answer Within <br> 60 Minutes</h5>
                            <p class="card-text">Get expert assistance within 60 minutes no long holds, no automated replies. Quick responses, clear solutions, real support.<br><br></p>
                            <a href="#contact" class="btn btn-primary w-100" onclick="showForm1()">Join Us</a>
                        </div>
                    </div>
                </div>
    
                <!-- Card 2 -->
                <div class="col-md-4">
                    <div class="card shadow">
                        <div class="card-body text-center">
                            <h5 class="card-title">Most Affordable Fee In Industry</h5>
                            <p class="card-text">At just £11.25 per week, you pay less for more. No overpriced fees, no unexpected deductions just transparent pricing.</p>
                            <a href="#contact" class="btn btn-primary w-100" onclick="showForm1()">Join Us</a>
                        </div>
                    </div>
                </div>
    
                <!-- Card 3 -->
                <div class="col-md-4">
                    <div class="card shadow">
                        <div class="card-body text-center">
                            <h5 class="card-title">Dedicated <br> Account Manager</h5>
                            <p class="card-text">A personal account manager is always available—no automated systems, no endless waiting. Get real support from someone who knows your name.</p>
                            <a href="#contact" class="btn btn-primary w-100" onclick="showForm1()">Join Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--====== End of Multiple Cards Section ======-->
    <!--  pop-up   -->
    
    <!-- Contact Modal -->
    <!-- Join Us Modal -->
<div id="joinUsModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeForm()">&times;</span>
        <h2 class="text-center">Join Us</h2>
        
        <!-- Contact Form (Same content as your existing form) -->
        <form action="send_email.php" method="post">
            <div class="form-group">
                <label for="firstName">Your Name <span style="color:red; font-size:12px;">*</span></label>
                <input type="text" id="firstName" name="firstName" class="form-control" placeholder="Enter your first name" required>
            </div>
            <br>
            <div class="form-group">
                <label for="email">Email <span style="color:red; font-size:12px;">*</span></label>
                <input type="email" class="form-control" name="email" placeholder="Email" required>
            </div>
            <br>
            <div class="form-group">
                <label for="phone">Phone Number <span style="color:red; font-size:12px;">*</span></label>
                <input type="text" class="form-control" name="phone" placeholder="Contact Number" required>
            </div>
            <br>
            <div class="form-group">
                <label for="message">Message <span style="color:red; font-size:12px;">*</span></label>
                <textarea class="form-control" name="message" placeholder="Enter your message" required></textarea>
            </div>
            <br>
            <!-- Google reCAPTCHA -->
            <div class="g-recaptcha" data-sitekey="6LdCtAMrAAAAAO1R1LhhCx3aqUuul5ebicb9sy8g"></div>
            <br>

            <button type="submit" class="btn btn-primary w-100" name="submit">Submit</button>
        </form>

    </div>
</div>

    <!-- Contact Modal -->
    

   

    
    
    <!-- *****  ***** -->
        <section id="service-three-features" class="section service-area bg-grey ptb_150" style="background: url('assets/img/callus-lightedBG.webp') no-repeat center center; background-size: cover; width: 100%; height: auto; min-height: 80vh;">
            <div id="three-features" class="container-fluid">
                <!-- Shape Top -->
                <div class="shape shape-top">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" fill="#FFFFFF">
                        <path class="shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
                    c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
                    c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
                    </svg>
                </div>
                <div class="industry">
                    <h1 class="text-center">Ombrella vs. Industry Standard: A Faster, More Affordable Solution</h1>
                    <br>
                    <div class="row no-mobile-stack">
                        <div class="col-md-4">
                            <div class="transparent-card" style="border:none;">
                                <div class="card-body">
                                    <h5 class="card-title"><button class="p-2" style="border:none; border-radius: 5px; background-color:#f2cbff;">Features</button></h5>
                                    <p class="card-text">Compare essential aspects that impact your contracting experience.</p>
                                    <hr>
                                    <br>
                                    <p>Sign up</p>
                                    <hr>
                                    <br>
                                    <p>On Boarding</p>
                                    <hr>
                                    <br>
                                    <p>Invoicing</p>
                                    <hr>
                                    <br>
                                    <p>Payment Processing</p>
                                    <hr>
                                    <br>
                                    <p>Funds Deposit Time</p>
                                    <hr>
                                    <br>
                                    <p>Fees</p>
                                    <hr>
                                    <br>
                                    <p>Free Service</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card shadow" style="background-color:rgb(166,74,234);">
                                <div class="card-body">
                                    <h5 class="card-title"><button class="p-2" style="border:none; border-radius: 5px; color:#8830df;">Ombrella</button></h5>
                                    <p class="card-text text-white">Ombrella streamlines your financial management with speed & efficiency.</p>
                                    <hr>
                                    <p class="text-white"><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#ffffff; font-size:20px;"></i>60 Minutes</p>
                                    <hr>
                                    <p class="text-white"><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#ffffff; font-size:20px;"></i>60 Minutes</p>
                                    <hr>
                                    <p class="text-white"><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#ffffff; font-size:20px;"></i>2 Hours</p>
                                    <hr>
                                    <p class="text-white"><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#ffffff; font-size:20px;"></i>2 Hours</p>
                                    <hr>
                                    <p class="text-white"><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#ffffff; font-size:20px;"></i>60 Minutes</p>
                                    <hr>
                                    <p class="text-white"><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#ffffff; font-size:20px;"></i>£11.25 per week or £45 per month</p>
                                    <hr>
                                    <p class="text-white"><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#ffffff; font-size:20px;"></i>Free for first 3 months</p>
                                    <br>
                                    <div class="text-center">
                                        <button class="custom-btn1 w-100" style="" onclick="openDialer()"><i class="fas fa-phone contact-icon"></i> Call us</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="transparent-card" style="border:none;">
                                <div class="card-body">
                                    <h5 class="card-title"><button class="p-2" style="border:none; border-radius: 5px; background-color:#f2cbff;">Industry Standard</button></h5>
                                    <p class="card-text">See how traditional companies compare in time, cost, and service.</p>
                                    <hr>
                                    <br>
                                    <p>~ 1 Day</p>
                                    <hr>
                                    <br>
                                    <p>~ 1 Day</p>
                                    <hr>
                                    <br>
                                    <p>~ 1 Day</p>
                                    <hr>
                                    <br>
                                    <p>~ 2 Day</p>
                                    <hr>
                                    
                                    <p>3 business days (with additional charges for a 24-hour turnaround).</p>
                                    <hr>
                                    <br>
                                    <p>~ £100 Per Month</p>
                                    <hr>
                                    <br>
                                    <p>No Free period is typically offered</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    <!-- Shape Bottom -->
                        <div class="shape shape-bottom">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600" preserveAspectRatio="none" fill="#FFFFFF">
                                <path class="shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
                            c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
                            c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
                            </svg>
                        </div>
            </div>
        </section>
        <!-- *****  ***** -->
        
        <!-- ***** Service Area End ***** -->
        <section id="services" class="">
            <div class="container-fluid px-4">
                <div class="row">
                    <div class="">
                        <!-- Section Heading -->
                        <div class="benefits section-heading">
                            <h2 class="my-3 text-center" style="text-transform: capitalize; font-weight: normal;">Benefits</h2>
							<div class="row">
								<div class="col">

							<p><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#9CBF50; font-size:20px;"></i><b>Peace of Mind</b> – Expert Management of Taxes and Deductions</p>
							<p><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#9CBF50; font-size:20px;"></i><b>Easy & Fast</b> – Submit Timesheets and Access Payslips through Our Secure Portal</p>
							
							<p><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#9CBF50; font-size:20px;"></i><b>Expert IR35 Guidance</b> – Tailored Compliance Advice from Our Specialists</p>
									<p><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#9CBF50; font-size:20px;"></i><b>Weekend Availability</b> – Open for Advice & Support, Saturday 9am-3pm</p>
									<p><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#9CBF50; font-size:20px;"></i><b>Supporting Mortgages & Loans</b> – Maintain Continuous Employment Records for Flexible Work, Beneficial for Securing Mortgages and Loans.</p>
								</div>
								<div class="col mt-3">
									<p><i class="fa-sharp fa-solid fa-circle-check mr-2" style="color:#9CBF50; font-size:20px;"></i><b>Instant Payment Notifications</b> – Receive prompt notification from us when you are paid.</p>
	
							
							<p><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#9CBF50; font-size:20px;"></i><b>Comprehensive Insurance</b> – Standard Coverage Including Professional Indemnity, Public, and Employer’s Liability.</p>
							<p><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#9CBF50; font-size:20px;"></i><b>Referral Program</b> – Enjoy Exceptional free service with each of your referral.</p>
							<p><i class="fa-sharp fa-solid fa-circle-check mr-2 mt-4" style="color:#9CBF50; font-size:20px;"></i><b>Reliable Agency Collaboration</b> – Partnering with Your Employment Agency for Seamless Operations</p>
								</div>
							</div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
    

                </div>
              
            </div>
        </section>
        <!-- ***** Service Area End ***** -->

        <!-- ***** Portfolio Area End ***** -->

        <!-- ***** Price Plan Area Start ***** -->

        <!-- ***** Price Plan Area End ***** -->
<!--====== Contact Area Start ======-->
<section id="contact" class="contact-fields contact-area ptb_100 welcome-area bg-overlay" style="height:auto;">
            <div class="shape shape-top">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" fill="#FFFFFF">
                    <path class="shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
                c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
                c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
                </svg>
            </div>
            <div class="container-fluid px-4">
                <div class="row d-flex align-items-center">
                    <div class="col-8 col-lg-12 pt-lg-0">
                        <!-- Contact Box -->
                        <div class="contact-box">
                            <!-- Contact Form -->


                        <form action="send_email.php" method="post">
                                <div class="row py-5">
                                    <div class="col-8 col-lg-6 pt-lg-0 mx-auto">
										<h1 class="mb-3 contact-head text-center">GET A
								            <span class="text-white pt-5" style="font-style: italic; font-family: cursive;"> FREE </span>CONSULTATION
							            </h1><br><br>
                                        
                                            <div class="form-group text-white">
												<label for="firstName">Your name <span class="" style="color:red; font-size:12px;">*</span></label>
												<input type="text" style="border-radius:20px;" id="firstName" name="firstName" class="form-control" placeholder="Enter your first name" required>
											</div>
										<br>
                                        <div class="form-group text-white">
											<label for="email">Email <span class="" style="color:red; font-size:12px;">*</span> </label>
                                            <input type="email" style="border-radius:20px;" class="form-control" id="email" name="email" placeholder="Email" required="required">
                                        </div>
										<br>
                                        <div class="form-group text-white">
											<label for="phone">Phone Number<span class="" style="color:red; font-size:12px;">*</span></label>
                                            <input type="text" style="border-radius:20px;" class="form-control" id="phone" name="phone" placeholder="Contact Number">
                                        </div>
                                        <br>
                                        <div class="form-group text-white">
                                            <label for="message">Message</label>
                                            <textarea class="form-control" name="message" style="height: 50px; border-radius:20px;" placeholder="Enter your message" rows="1"></textarea>
                                        </div>
                                        <br>
                                        <!-- Google reCAPTCHA
                                        <div class="g-recaptcha" data-sitekey="6LdCtAMrAAAAAO1R1LhhCx3aqUuul5ebicb9sy8g"></div>
                                        <br> -->

										
                                    
                                    <div class="row contact-btn pb-5">
                                        <div class="col-12 col-md-6">
                                            <button type="submit" class="submit-btn btn btn-bordered active mt-3" name="save">
                                            <i class="fas fa-paper-plane"></i> Submit
                                        </button>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <button class="submit-btn btn btn-bordered active mt-3" onclick="openDialer()">
                                            <i class="fas fa-phone"></i> Call us <br><br> 0203 793 4078
                                        </button>
                                        </div>
                                    </div>
                                    
                                    </div>
                                    
                                </div>
                                
                            </form>
                            <p class="form-message"></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Shape Bottom -->
            <div class="shape shape-bottom">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 320" preserveAspectRatio="none" fill="#FFFFFF">
                    <path class="shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
        c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
        c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
                </svg>
            </div>
        </section>
        <!--====== Contact Area End ======-->
        
        

    
        
    <section id="accordionBlock" class="faq-content widget widgetAccordion">
    <div class="container-fluid px-4">
        <header class="row">
            <div class="col-sm-8 offset-sm-2 text-center mt-4">
                <h2>Frequently Asked Questions</h2>
                <p></p>
            </div>
        </header>
        <div class="row">
            <div class="col-12 text-right">
                <button id="toggleButton" class="btn btn-primary btn-customs toggle-accordion my-3" onclick="toggleAccordion()">Expand all</button>
            </div>
            <div class="col-12 accordion">
                <div id="accordion" role="tablist" aria-multiselectable="true">
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-1">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
                                    What is an Umbrella Company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-1" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-1" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">An umbrella company is a firm that employs contractors who work on fixed-term assignments, often sourced by recruitment businesses. The umbrella company handles the contractor's payroll, deducting PAYE (Pay as You Earn) and National Insurance contributions, effectively acting as the employer by providing an overarching contract of employment.</p>
                            </div>
                        </div>
                    </div>
                     <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-2">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
                                    How do Umbrella companies work?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-2" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-2" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">An umbrella company employs you, manages your payroll, and ensures compliance with all tax and employment laws. They invoice your agency or end client for the work you’ve done. From the funds received, they allocate amounts for Employer’s NI, the Apprenticeship Levy, their margin, and any pension contributions. The remaining amount is processed for Employee’s NI and Income Tax deductions in line with UK tax regulations. Finally, your net salary is transferred directly to your bank account. This approach ensures seamless compliance and payroll management.
</p>
                            </div>
                        </div>
                    </div>
                     <!--======  ======-->
                     <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-3">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
                                    Will I be self-employed if I join an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-3" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-3" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Upon becoming part of an umbrella company, you gain the status of being one of their employees, which means you're not considered self-employed in the technical sense.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                     <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-4">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
                                    What deductions will the umbrella company make in my payslip?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-4" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-4" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Your payslip will reflect statutory deductions, including Income Tax, Employee’s National Insurance, and pension contributions (if applicable). Any additional deductions, such as those related to salary sacrifice schemes, will also be shown clearly. Employer costs, such as Employer’s NI and the Apprenticeship Levy, are covered separately by the umbrella company from the assignment rate. These are not deducted from your earnings. The payslip provides a transparent breakdown, ensuring you understand how your pay is calculated.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-5">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-5" aria-expanded="false" aria-controls="collapse-5">
                                    What are the advantages/pros of an Umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-5" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-5" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Contractors and freelancers benefit from numerous advantages when they select an umbrella company to manage their payroll, including:<br>
                                <li style="font-size:16px;">Reduced paperwork and rapid registration.</li>
                                <li style="font-size:16px;">Direct payment of taxes and National Insurance Contributions (NICs) to HMRC, eliminating any concerns.</li>
                                <li style="font-size:16px;">No commitment periods.</li>
                                <li style="font-size:16px;">Flexibility to easily transition between working under a limited company and an umbrella company.</li>
                                <li style="font-size:16px;">Complimentary insurance coverage.</li>
                                <li style="font-size:16px;">Access to employee benefits such as Sick Pay and Maternity/Paternity Pay.</li>
                                <li style="font-size:16px;">Applicability to nearly all contracting roles.</li>
                                <li style="font-size:16px;">Maintained continuity of employment.</li>
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-6">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-6" aria-expanded="false" aria-controls="collapse-6">
                                    What are the disadvantages/Cons of an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-6" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-6" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Using an umbrella company for payroll also comes with certain drawbacks, such as:<br>
                                <li style="font-size:16px;">Lower tax efficiency compared to operating through a limited company (if you're outside IR35).</li>
                                <li style="font-size:16px;">Reduced financial autonomy due to the umbrella handling your taxes, NICs, etc.</li>
                                <li style="font-size:16px;">Limited ability or no ability to claim expenses following the enforcement of Supervision, Direction, and Control measures.</li>
                                <li style="font-size:16px;">Limited opportunities for tax planning.</li>
                                <li style="font-size:16px;">Operating under a limited company could enhance your professional credibility.</li>
                                <li style="font-size:16px;">The costs associated with employment through an umbrella company may be viewed as burdensome by contractors.</li>
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-7">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-7" aria-expanded="false" aria-controls="collapse-7">
                                    What does BACS payment stands for?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-7" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-7" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">BACs payments refer to the Bankers Automated Clearing Service, which is a type of bank transfer from one account to another. Typically, BACs transactions can take 3 to 5 days to process, making them slower than Same Day Faster Payments.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-8">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-8" aria-expanded="false" aria-controls="collapse-8">
                                    What is PAYE or What does PAYE stands for?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-8" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-8" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">PAYE stands for "Pay As You Earn." It's a system where tax and National Insurance are taken out of your wages or pension before you receive the money. This way, your taxes are paid automatically throughout the year, so you don't have to worry about paying a big tax bill all at once. Ombrella company  handles all the deductions based on how much you earn and send them directly to the HMRC.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-9">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-9" aria-expanded="false" aria-controls="collapse-9">
                                    How to submit timesheets to Ombrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-9" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-9" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Submitting timesheets may vary from one umbrella company to another, but with OmbrellaCompany, the process is simple, straightforward and easy. You can email your completed timesheets to a dedicated timesheet mailbox  timesheets@ombrellacompany.com.
</p>    
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-10">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-10" aria-expanded="false" aria-controls="collapse-10">
                                    What is KID/ Key Information Document?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-10" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-10" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">The Key Information Document was implemented  on 6th April 2020 , as a way of improving the transparency of information provided to workers, particularly around pay, and an overview of how any deductions or fees will affect your take home pay. They should be accurate and transparent.<br><br>
The Key Information Document will also detail the business relationship between you, your recruitment agency and end client before you agree to the terms of the contract or sign any legally binding documents.<br><br>
An employment business can also provide any additional information that contractors or freelancers may find useful, such as reward schemes or period of notice to be worked.

</p>    
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-11">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-11" aria-expanded="false" aria-controls="collapse-11">
                                    When will you be provided with the Key Information Document?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-11" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-11" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Starting from April 6, 2020, your recruitment agency is required to provide you with a Key Information Document before you agree to an engagement. If you are already under contract with pre-agreed terms, you won't need a new Key Information Document unless there are changes to the information it contains.<br><br>
                                You should expect to receive a Key Information Document. If you aren't informed about it, make sure to follow up with your recruitment consultant. It's important they are aware of this requirement, and if they aren't, that could be a red flag!
</p>    
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-12">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-12" aria-expanded="false" aria-controls="collapse-12">
                                    What does the Key Information Document mean to umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-12" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-12" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">The implementation of Key Information Documents has led to a significant boost in transparency right from the start for those employed by umbrella companies. Before committing to a contract, you now have the clarity on the deductions from your pay and a realistic view of your potential earnings should you take on the role.<br><br>
                                This change has also made it simpler for contractors and agency workers to assess and compare their expected net pay across various umbrella companies.
</p>    
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-13">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-13" aria-expanded="false" aria-controls="collapse-13">
                                    Key Information Document Enforcement : 
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-13" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-13" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">It's important not to agree to a contract from your recruitment agency unless they've given you at least one Key Information Document. Additionally, it's wise to thoroughly research any umbrella company you're thinking of using for your payroll.<br><br>
                                The Employment Agencies Standards Inspectorate is responsible for enforcing this new rule.<br><br>
                                Furthermore, with these updates, there are also major changes to the regulations regarding written statements. Now, all new agency workers, regardless of being classified as 'workers' or employees, are legally entitled to a written statement of employment details, along with the Key Information Document.
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-14">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-14" aria-expanded="false" aria-controls="collapse-14">
                                    What is the cost of using an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-14" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-14" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Compliant umbrella companies earn their revenue solely through the margin they apply for handling your payroll. Typically, these margins range from £15 to £35 weekly but with Ombrella Company it is  £11.25 which is the cheapest in the market. Any other deductions shown on your payslip are made on your behalf and paid directly to HMRC.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-15">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-15" aria-expanded="false" aria-controls="collapse-15">
                                    How do umbrella companies earn/generate revenue for themselves?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-15" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-15" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Each time a compliant umbrella company processes your payroll, they retain a margin to cover administrative expenses and the operational costs of their business. This margin represents the sole income that umbrella companies generate for themselves.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-16">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-16" aria-expanded="false" aria-controls="collapse-16">
                                    How is my income different from contracting through a limited company to contracting through Umbrella ?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-16" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-16" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Contracting via a limited company (outside of IR35) allows you to engage in strategic tax planning, enabling you to draw your income through a mix of salary and dividends. Generally, this approach can legally allow you to keep over 80% of your earnings, although this percentage can vary based on personal circumstances and serves only as a rough estimate. On the other hand, when you work through an umbrella company, you are subject to PAYE taxes, which means your take-home pay is typically less compared to a limited company setup. In such cases, you can expect to retain about 55% to 70% of your income, but these figures are provided as general guidance only.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-17">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-17" aria-expanded="false" aria-controls="collapse-17">
                                    Why is it my responsibility to cover the employment cost when working through an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-17" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-17" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">The assignment rate agreed upon with your agency or client is designed to include all statutory and employment costs, such as Employer’s NI and the Apprenticeship Levy. These costs are not deductions from your earnings but are necessary to comply with UK employment laws. The umbrella company uses this rate to meet its obligations as your employer, ensuring you are paid correctly and that all required contributions are made. Understanding the assignment rate helps clarify how these costs are managed without affecting your net income.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-18">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-18" aria-expanded="false" aria-controls="collapse-18">
                                    Why do I need to pay Employer’s Insurance when working through an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-18" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-18" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">As your employer, the umbrella company is required to pay Employer’s National Insurance (NI) contributions as part of its statutory obligations. The funding for these contributions comes from the assignment rate agreed with your agency or client. This ensures that all employment costs are covered while the umbrella company fulfills its legal duties. Importantly, these contributions are not deducted from your personal salary but are accounted for as part of the overall assignment rate.

</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-19">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-19" aria-expanded="false" aria-controls="collapse-19">
                                    Why do I need to pay Apprenticeship Levy when working through an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-19" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-19" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">When you work through an umbrella company, you are employed by them, and they are responsible for meeting all statutory obligations, including the Apprenticeship Levy. This levy is part of the overall assignment rate agreed upon with your recruitment agency or end client. It is not an additional deduction from your salary but a necessary contribution that the umbrella company forwards directly to HMRC, ensuring compliance with UK tax laws.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-20">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-20" aria-expanded="false" aria-controls="collapse-20">
                                    What does employment costs mean?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-20" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-20" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">When contracting via an umbrella company, the employment-related expenses include the Employer's National Insurance Contributions (NICs) and the Apprenticeship Levy.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-21">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-21" aria-expanded="false" aria-controls="collapse-21">
                                    What are the benefits of working through an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-21" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-21" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Working under an umbrella company enables you to qualify for Employee Benefits, such as Sick Pay and Maternity/Paternity Pay.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                     <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-22">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-22" aria-expanded="false" aria-controls="collapse-22">
                                    Why can’t I be a sole trader?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-22" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-22" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Agencies and companies that hire contractors usually insist on receiving a legitimate tax invoice before making payments. This precaution is taken to avoid penalties associated with incorrect employment classification, such as being liable for unpaid PAYE (Pay As You Earn) and National Insurance contributions that would have been due if the contractor were classified as an employee. To navigate these requirements, you have two options: establish your own Limited Company or join an Umbrella Scheme. Opting for an Umbrella Scheme effectively makes you an employee of the Umbrella Company, thereby simplifying your employment status clarification.<br><br>
                                As an employee of an umbrella company, you sign an employment contract and are entitled to all standard rights of employment. The company also handles insurance and pays all necessary tax and NI contributions to HMRC on your behalf. This setup means you don't have to worry about IR35, as you pay employed levels of tax and national insurance.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                     <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-23">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-23" aria-expanded="false" aria-controls="collapse-23">
                                    What are the benefits included in an Umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-23" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-23" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Contractors employed by an umbrella company are entitled to statutory benefits such as sick pay, maternity, adoption, or paternity leave, and are automatically covered by the company's insurance. 
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-24">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-24" aria-expanded="false" aria-controls="collapse-24">
                                    Which  Insurances are  provided in an Umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-24" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-24" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">This insurance includes Employers Liability, Public/Products Liability, and Professional Indemnity.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-25">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-25" aria-expanded="false" aria-controls="collapse-25">
                                    What is Employer’s Liability Insurance?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-25" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-25" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Employer's Liability insurance provides protection if you suffer an injury or illness while on the job. It's important to carefully review the policy details whenever you receive one.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-26">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-26" aria-expanded="false" aria-controls="collapse-26">
                                    What is Public Liability Insurance?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-26" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-26" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Public Liability Insurance offers protection when you are working in proximity to the general public. It generally covers incidents where you inadvertently cause injury, loss, or damage. Make sure to thoroughly review any policy that is presented to you.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-27">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-27" aria-expanded="false" aria-controls="collapse-27">
                                    What is professional indemnity insurance?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-27" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-27" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Professional Indemnity Insurance provides coverage if your end client seeks compensation for any errors or negligence on your part that leads to their financial loss.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-28">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-28" aria-expanded="false" aria-controls="collapse-28">
                                    How is holiday pay calculated when employed by an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-28" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-28" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">When negotiating your assignment rate, it's important to consider holiday pay. Umbrella companies calculate this at 12.07% and typically display it on your payslip, though it is essentially a reallocation of your earnings, neither benefiting nor disadvantaging you financially. Most umbrella companies offer two options: you can either accrue your holiday pay, allowing 12.07% of your earnings to be set aside for future use, or choose to have it paid out with each payroll processing.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-29">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-29" aria-expanded="false" aria-controls="collapse-29">
                                    How is pension pay calculated when employed by an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-29" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-29" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">As your employer, umbrella companies must enroll you in a pension scheme after 12 weeks, often choosing NEST (the government's pension plan) as their preferred provider. You are obligated to contribute both the Employee’s Contribution (5%) and the Employer’s Contribution (3%). However, you have the option to opt out of making pension contributions.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-30">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-30" aria-expanded="false" aria-controls="collapse-30">
                                    How to opt out of pension plan?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-30" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-30" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">If you decide to opt out of pension contributions, please contact your umbrella company. They will guide you through the process, which should be quite simple.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-31">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-31" aria-expanded="false" aria-controls="collapse-31">
                                    Is it straightforward to transition from contracting through an umbrella company to using a limited company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-31" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-31" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Yes, switching between contracting through an umbrella company and a limited company can be quite straightforward, especially if you're working with a reputable accountant and umbrella company. Many firms offer both contractor accountancy and umbrella payroll services, ensuring a smooth and cost-effective transition between the two.<br><br>
                                If you are currently a limited company contractor and might need to use an umbrella company in the future, you should talk to your accountant. They can check if they operate an umbrella company or can recommend one, and they might also offer a service that allows your limited company to remain active but dormant, potentially at a reduced cost.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-32">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-32" aria-expanded="false" aria-controls="collapse-32">
                                    Is there a joining fee for an umbrella company ? 
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-32" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-32" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">No - There is no joining fee for an umbrella company.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-33">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-33" aria-expanded="false" aria-controls="collapse-33">
                                    Is there a leaving fee for an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-33" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-33" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">No - There is no leaving fee for an umbrella company.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-34">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-34" aria-expanded="false" aria-controls="collapse-34">
                                    How does an umbrella company calculate take home pay?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-34" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-34" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">For a personalized take-home pay estimate from an umbrella company, it's  best to contact a compliant umbrella company directly. Provide them with details about your situation, such as your rate of pay, hours per week, and other relevant information. They will then be able to give you a detailed take-home pay calculation.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-35">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-35" aria-expanded="false" aria-controls="collapse-35">
                                    Why does  take home pay differ from Umbrella company to other umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-35" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-35" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">We've received reports that some umbrella companies are misleading contractors by inflating projected take-home pay to attract them over competitors. They might add non-claimable expenses, use inaccurate tax codes, or fail to account for days off in their calculations.<br>
                                It’s important to note that the only difference between compliant umbrella companies should be the fee they charge for their services. All compliant companies will process your pay using the same PAYE system, and your take-home pay projections should be quite similar across the board. If an umbrella company offers you a significantly higher take-home pay estimate, approach with caution.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-36">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-36" aria-expanded="false" aria-controls="collapse-36">
                                    How long does it take to register to an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-36" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-36" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Registering with an umbrella company is generally a simple process that can be completed in about 15 minutes. You'll need to reach out to your chosen provider and inform them that you'd like to sign up. They can typically enroll you via a phone call or through an online form, depending on your preference.<br>
                                During registration, you'll be required to provide the umbrella company with essential personal details such as your address, date of birth, national insurance number, and bank details, which are legally necessary for them to process your payments. Additionally, you will need to submit proof of your identity (usually a copy or photo of your passport) and, if relevant, your visa.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-37">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-37" aria-expanded="false" aria-controls="collapse-37">
                                    What is the leaving procedure for an umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-37" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-37" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Exiting an umbrella company is typically straightforward. Simply inform your umbrella company that you intend to leave. They will guide you through any necessary steps, which are usually minimal. After your departure, the umbrella company will issue you a P45.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-38">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-38" aria-expanded="false" aria-controls="collapse-38">
                                    Why is my agency limiting me to using only a select few umbrella companies?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-38" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-38" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Responsible recruitment agencies will have a preferred supplier list (PSL) with a selection of compliant umbrella companies on it. If you are not happy using any of the providers on the list you’re given, speak with your agency. Always carry out your own due diligence when selecting an umbrella company and always make sure you use a compliant provider. What do you think of this composition for umbrella company. Can you revise it with suggested improvements  ?
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-39">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-39" aria-expanded="false" aria-controls="collapse-39">
                                    What are the Payment Terms of an Umbrella company?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-39" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-39" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Umbrella companies typically align payment terms with those of your agency, meaning you could be paid weekly or monthly. Payments are made directly to your nominated bank account, and you will receive notification and a payslip each time a payment is made
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-40">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-40" aria-expanded="false" aria-controls="collapse-40">
                                    What is the procedure of working with Multiple Agencies or Clients?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-40" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-40" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Umbrella companies allow you to work with multiple agencies or clients at the same time, streamlining the invoicing and payment process for each engagement.<br><br>
                                These FAQs offer a snapshot into the operations and benefits of using an umbrella company for contractors. For more detailed information, specific processes, and terms of service, it's advisable to contact the umbrella company directly or visit their website.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-41">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-41" aria-expanded="false" aria-controls="collapse-41">
                                    How do I Register and are there any hidden fees?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-41" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-41" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Registration with an umbrella company  is straightforward, typically done through their website, with a clear process outlined in their registration section. They emphasize transparency, ensuring no hidden fees are involved. The margin or fee retained by the umbrella company from the funds it receives for your work is disclosed upfront during the registration process​.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-42">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-42" aria-expanded="false" aria-controls="collapse-42">
                                    What are Statutory payments?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-42" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-42" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Statutory payments refer to the amounts required by law to be paid to employees under certain circumstances, such as sickness, maternity, paternity, adoption leave, and shared parental leave. These payments are a form of financial support for employees when they are away from work for reasons recognized by statutory laws. Here's an overview of the main types of statutory payments:
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-43">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-43" aria-expanded="false" aria-controls="collapse-43">
                                    What is Statutory Sick Pay (SSP)?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-43" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-43" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;"><li style="font-size:16px;">Eligibility: Employees are eligible if they have been ill for at least four consecutive days, are employed under a contract, and have met the minimum earnings threshold.</li>
                                    <li style="font-size:16px;">Duration: SSP can be paid for up to 28 weeks.</li>
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-44">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-44" aria-expanded="false" aria-controls="collapse-44">
                                    What is Statutory Maternity Pay (SMP)?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-44" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-44" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;"><li style="font-size:16px;">Eligibility: Pregnant employees are eligible if they have worked for their employer for a continuous period, typically around 26 weeks ending with the 15th week before the expected week of childbirth, and earn at least the minimum threshold.</li>
                                <li style="font-size:16px;">Duration: SMP is usually paid for up to 39 weeks, with the first 6 weeks paid at 90% of the average weekly earnings and the remaining weeks at a lower fixed rate or 90% of the average weekly earnings, whichever is lower.</li>
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-45">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-45" aria-expanded="false" aria-controls="collapse-45">
                                    What is Statutory Paternity Pay (SPP)?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-45" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-45" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;"><li style="font-size:16px;">Eligibility: To be eligible, employees must have worked for their employer for a certain period by the time the child is born or placed for adoption and earn at least the minimum threshold</li>
                                <li style="font-size:16px;">Duration: SPP is available for 1 or 2 consecutive weeks.</li>
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-46">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-46" aria-expanded="false" aria-controls="collapse-46">
                                    What is Statutory Adoption Pay (SAP)?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-46" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-46" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;"><li style="font-size:16px;">Eligibility: Employees adopting a child may be eligible if they meet similar employment and earnings criteria as those for SMP.
</li>
<li style="font-size:16px;">Duration: SAP is usually paid for up to 39 weeks, with rates similar to those for SMP.</li>
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-47">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-47" aria-expanded="false" aria-controls="collapse-47">
                                    What is Shared Parental Leave and Pay?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-47" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-47" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; "><li style="font-size:16px;">Eligibility: Allows parents to share up to 50 weeks of leave and up to 37 weeks of pay if they meet the work and earnings criteria.
</li>
<li style="font-size:16px;">Duration and Amount: The pay is at a fixed rate or 90% of the employee’s average weekly earnings, whichever is lower.
</li>
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-48">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-48" aria-expanded="false" aria-controls="collapse-48">
                                    How are Statutory Payments made?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-48" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-48" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Statutory payments are usually processed through the employer’s payroll, similar to regular wages, with taxes and National Insurance contributions being deducted as appropriate.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-49">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-49" aria-expanded="false" aria-controls="collapse-49">
                                    What is Employer Reimbursement?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-49" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-49" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">In some countries, employers can reclaim a percentage of the statutory pay they distribute to their employees from the government. This system is designed to support both businesses and employees.<br><br>
                                These payments ensure that employees are financially supported during periods when they cannot work due to personal circumstances. The exact conditions, amounts, and procedures can vary depending on the country's legislation, so it's important to refer to specific governmental guidelines for detailed and accurate information.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                     <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-50">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-50" aria-expanded="false" aria-controls="collapse-50">
                                    What is Apprenticeship Levy?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-50" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-50" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">Apprenticeship Levy is a tax introduced in 2017 to encourage employers to offer more apprenticeships. It applies to businesses with a turnover of £3 million or more and is deducted from the contract sum the umbrella company receives. It's important to note that this doesn't apply to self-employed workers​ 
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                     <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-51">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-51" aria-expanded="false" aria-controls="collapse-51">
                                    What is SDC (Supervision, Direction, or Control) Assessment?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-51" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-51" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;"><li style="font-size:16px;">Ombrella company conducts an SDC assessment to ensure you're not working under supervision, direction, or control in the manner you carry out your work, which can be crucial for determining your employment status​​.
</li>
<li style="font-size:16px;">
    Employer’s National Insurance Contributions: A common misconception is that employees.
</li>
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-52">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-52" aria-expanded="false" aria-controls="collapse-52">
                                    What is IR35?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-52" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-52" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">If you work regularly for a company, you're considered an employee for tax purposes, and IR35 affects you by requiring you to pay the same taxes and contributions as full-time employees. Payments Pro suggests using an HMRC tool to check your IR35 status​.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-53">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-53" aria-expanded="false" aria-controls="collapse-53">
                                    What are Pension Contributions?
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-53" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-53" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">If you wish to opt out of pension contributions, you'll receive a welcome pack from the pension provider (e.g., Nest Pensions for Clipper Contracting) with instructions on how to opt out. Contributions can be refunded up to 4 weeks if you opt out within a specific timeframe.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <div class="card faq-item">
                        <div class="card-header" role="tab" id="heading-54">
                            <h4 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-54" aria-expanded="false" aria-controls="collapse-54">
                                    Self-Employment vs. Employment:
                                </button>
                            </h4>
                        </div>
                        <div id="collapse-54" class="collapse accordion-content" role="tabpanel" aria-labelledby="heading-54" data-parent="#accordion">
                            <div class="card-body">
                                <p style="text-align:justify; font-size:16px;">When working through an umbrella company, you're technically employed by them, giving you full employment rights and protections.
</p>
                            </div>
                        </div>
                    </div>
                    <!--======  ======-->
                    <!-- Add more accordion items here -->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 text-center">
                <button id="showMoreBtn" class="btn btn-secondary btn-customs mt-3" onclick="showMoreFaqs()">Show More</button>
            </div>
        </div>
    </div>
</section>



        <!--====== Call To Action Area Start ======-->
        
        <!--====== Call To Action Area End ======-->

      <?php include "footer.php"; ?>
      
      <!-- Script -->
      <!-- Include Google reCAPTCHA Script -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
	<script id="navScript">
	document.addEventListener("DOMContentLoaded", function() {
    var navLinks = document.querySelectorAll('.navbar-nav a');

    navLinks.forEach(function(navLink) {
        navLink.addEventListener('click', function(event) {
            // Check if the link is not meant to scroll to a section on the same page
            if (!this.href.includes('#')) {
                // Prevent default behavior (navigation to a new page)
                event.preventDefault();

                // Get the target URL
                var targetUrl = this.getAttribute('href');

                // Redirect to the target URL
                window.location.href = targetUrl;
            } else {
                // Scroll to the target section smoothly
                var targetId = this.getAttribute('href').substring(1);
                var targetSection = document.getElementById(targetId);
                if (targetSection) {
                    window.scrollTo({
                        top: targetSection.offsetTop,
                        behavior: 'smooth'
                    });
                }
            }
        });
    });
});
</script>

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/67e81af02ba1a3190cacd522/1inhaiflf';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

<script>
    function toggleAccordion() {
        var accordionItems = document.querySelectorAll('.accordion-content');
        var toggleButton = document.getElementById('toggleButton');
        var allExpanded = true;

        accordionItems.forEach(function(item) {
            if (!item.classList.contains('show')) {
                allExpanded = false;
            }
        });

        if (allExpanded) {
            accordionItems.forEach(function(item) {
                item.classList.remove('show');
            });
            toggleButton.textContent = 'Expand all';
        } else {
            accordionItems.forEach(function(item) {
                item.classList.add('show');
            });
            toggleButton.textContent = 'Collapse all';
        }
    }
</script>

<script>
    function openDialer() {
        window.location.href = 'tel:02037934078';  // Trigger the dialer with the phone number
    }
</script>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        var faqs = document.querySelectorAll(".faq-item");
        var showMoreBtn = document.getElementById("showMoreBtn");
        var currentlyVisible = 5; // Number of FAQs visible initially

        // Hide all FAQs except the first 5
        for (var i = 5; i < faqs.length; i++) {
            faqs[i].style.display = "none";
        }

        function showMoreFaqs() {
            var nextVisibleCount = currentlyVisible + 5;
            
            for (var i = currentlyVisible; i < nextVisibleCount && i < faqs.length; i++) {
                faqs[i].style.display = "block";
            }
            
            currentlyVisible = nextVisibleCount;

            // Hide button if all FAQs are visible
            if (currentlyVisible >= faqs.length) {
                showMoreBtn.style.display = "none";
            }
        }

        window.showMoreFaqs = showMoreFaqs;
    });

    function toggleAccordion() {
        var accordionItems = document.querySelectorAll('.accordion-content');
        var toggleButton = document.getElementById('toggleButton');
        var allExpanded = Array.from(accordionItems).every(item => item.classList.contains('show'));

        accordionItems.forEach(function (item) {
            if (allExpanded) {
                item.classList.remove('show');
            } else {
                item.classList.add('show');
            }
        });

        toggleButton.textContent = allExpanded ? 'Expand all' : 'Collapse all';
    }
</script>
<script>
    document.getElementById('userForm').addEventListener('submit', function(event) {
        event.preventDefault();

        var inputNumber = parseFloat(document.getElementById('inputNumber').value);
        var hoursWorked = parseFloat(document.getElementById('Hoursworked').value);
        var formContainer = document.getElementById('formContainer');
        var loadingSpinner = document.querySelector('.loading-spinner');
        var resultContainer = document.getElementById('resultContainer');
        var resultName = document.getElementById('resultName');
        var resultHours = document.getElementById('resultHours'); // New variable for hours result

        // Show loading spinner
        loadingSpinner.style.display = 'block';

        // Simulate loading
        setTimeout(function() {
            // Hide form and loading spinner
            formContainer.style.display = 'none';
            loadingSpinner.style.display = 'none';

            // Show result
            resultName.textContent = 'Input Number: ' + inputNumber;
            resultHours.textContent = 'Hours Worked: ' + hoursWorked; // Update hours worked
            resultContainer.style.display = 'block';
        }, 1000);
    });

    function showForm() {
        document.getElementById('formContainer').style.display = 'block';
        document.getElementById('resultContainer').style.display = 'none';
    }
</script>

		<!-- Begining of calculator script   -->
		<script>
		
		const DEFAULT_HOURS = 37.5;
		const monthly_ni_seconday = 417;
		
        //Global variable declaration  AND FETCH FROM PHPMYADMIN
        var fees = <?php echo $fees; ?>;
        var mileage_expenses = <?php echo $mileage_expenses; ?>;
        var ni_secondary = <?php echo $ni_secondary; ?>;
        var ni_rate = <?php echo $ni_rate; ?>;
        var primary_threshold = <?php echo $primary_threshold; ?>;
        var upperlimit_uel = <?php echo $upperlimit_uel; ?>;
        var incomebt_primary_uel = <?php echo $incomebt_primary_uel; ?>;
        var income_inexcess = <?php echo $income_inexcess; ?>; 

        var weeksinyear = <?php echo $weeksinyear; ?>;
        var personal_allowance = <?php echo $personal_allowance; ?>;
        var firstband = <?php echo $firstband; ?>;
        var secondband = <?php echo $secondband; ?>;
        var taxable_amount = <?php echo $taxable_amount; ?>;
        var basic_tax = <?php echo $basic_tax; ?>;  //  20%
        var higher_tax = <?php echo $higher_tax; ?>;  //  40%
        var additional_tax = <?php echo $additional_tax; ?>;  //  45% 
        var nationalInsurance = 0;
			//  Script for NETPAY Calculator
        
			
		function combineResults() {
			var inputNumber = parseFloat(document.getElementById('inputNumber').value);
			var hoursWorked = parseFloat(document.getElementById('Hoursworked').value);
			var resultField = document.getElementById('result');

			// Call each function to get the individual result values
			var resultTaxCalc = taxcalc(inputNumber,hoursWorked);
			var resultTaxHigh = taxhigh(inputNumber,hoursWorked);
			var resultTaxAdd = taxadd(inputNumber,hoursWorked);
			var resultGross = gross(inputNumber,hoursWorked);
			var resultEmployeeNIC = calculate(inputNumber,hoursWorked);
            const heading = document.getElementById('incomeHeading');
            
             
                if (parseFloat(hoursWorked) === 37.5) {
                    heading.textContent = "YOUR ESTIMATED WEEKLY INCOME";
                } else {
                    heading.textContent = "YOUR ESTIMATED MONTHLY INCOME";
                }
                

               
        
			// Add the results together
			var totalResult = resultTaxCalc + resultTaxHigh + resultTaxAdd;
			
			if (hoursWorked === DEFAULT_HOURS) {
			    var paye = totalResult/weeksinyear; // PAYE CALCULATION
			}
			else {
			    var paye = totalResult/12; // PAYE CALCULATION
			}

			var netpay = resultGross-paye-resultEmployeeNIC;

			resultField.value = netpay.toFixed(2);// Final Net Pay
			
		}
		


        //Tax cal
		function taxcalc(inputNumber, hoursWorked) {
		    var adjustedFees = (hoursWorked === DEFAULT_HOURS) ? fees : 45;
			var earnings = inputNumber * hoursWorked; 
			if (earnings - adjustedFees - mileage_expenses >= 0) {
				var gross1 = earnings - adjustedFees - mileage_expenses;
				
				if (hoursWorked === DEFAULT_HOURS) {
                    gross2 = ni_secondary * ni_rate;
                } else {
                    gross2 = monthly_ni_seconday * ni_rate;
                }
				
				var gross3 = 1 + ni_rate;
				var gross4 = gross1 + gross2;
				var grossfinal = gross4 / gross3;
				
				
				if (hoursWorked === DEFAULT_HOURS) {
				    var taxcal1 = grossfinal * weeksinyear; 
				} else {
				    var taxcal1 = grossfinal * 12; 
				}
				
				var taxcal2 = taxcal1 - personal_allowance;
				
				if (hoursWorked === DEFAULT_HOURS) {
				    var taxcal3 = Math.floor(taxcal2 /weeksinyear);
				    var round = taxcal3 * weeksinyear;
				} else {
				    var taxcal3 = Math.floor(taxcal2 /12);
				    var round = taxcal3 * 12;
				}
				
				var tax = 0;
				if (round < 0) {
					tax = 0;
				} else if (round > firstband) {
					tax = firstband * basic_tax;
				} else {
					tax = round * basic_tax;
				}
				return tax;
			}
			return 0;
		}

        //Tax Higher cal
		function taxhigh(inputNumber, hoursWorked) {
		    var adjustedFees = (hoursWorked === DEFAULT_HOURS) ? fees : 45;
			var earnings = inputNumber * hoursWorked;
			if (earnings - adjustedFees - mileage_expenses >= 0) {
				var gross1 = earnings - adjustedFees - mileage_expenses;
				
				if (hoursWorked === DEFAULT_HOURS) {
                    gross2 = ni_secondary * ni_rate;
                } else {
                    gross2 = monthly_ni_seconday * ni_rate;
                }
				
				var gross3 = 1 + ni_rate;
				var gross4 = gross1 + gross2;
				var grossfinal = gross4 / gross3;
				
				if (hoursWorked === DEFAULT_HOURS) {
				    var taxcal1 = grossfinal * weeksinyear; 
				} else {
				    var taxcal1 = grossfinal * 12; 
				}
				
				var taxcal2 = taxcal1 - personal_allowance;
				
				if (hoursWorked === DEFAULT_HOURS) {
				    var taxcal3 = Math.floor(taxcal2 /weeksinyear);
				    var round = taxcal3 * weeksinyear;
				} else {
				    var taxcal3 = Math.floor(taxcal2 /12);
				    var round = taxcal3 * 12;
				}
				
				var tax = 0;
				if (round > secondband) {
					tax = taxable_amount * higher_tax;
				} else if (round > firstband) {
					tax = (round - firstband) * higher_tax;
				}
				return tax;
			}
			return 0;
		}

        //Additional Tax cal
		function taxadd(inputNumber, hoursWorked) {
		    var adjustedFees = (hoursWorked === DEFAULT_HOURS) ? fees : 45;
			var earnings = inputNumber * hoursWorked;
			if (earnings - adjustedFees - mileage_expenses >= 0) {
				var gross1 = earnings - adjustedFees - mileage_expenses;
				
				if (hoursWorked === DEFAULT_HOURS) {
                    gross2 = ni_secondary * ni_rate;
                } else {
                    gross2 = monthly_ni_seconday * ni_rate;
                }
				
				var gross3 = 1 + ni_rate;
				var gross4 = gross1 + gross2;
				var grossfinal = gross4 / gross3;
				
				if (hoursWorked === DEFAULT_HOURS) {
				    var taxcal1 = grossfinal * weeksinyear; 
				} else {
				    var taxcal1 = grossfinal * 12; 
				}
				
				var taxcal2 = taxcal1 - personal_allowance;
				
				if (hoursWorked === DEFAULT_HOURS) {
				    var taxcal3 = Math.floor(taxcal2 /weeksinyear);
				    var round = taxcal3 * weeksinyear;
				} else {
				    var taxcal3 = Math.floor(taxcal2 /12);
				    var round = taxcal3 * 12;
				}
				
				var tax = 0;
				if (round > secondband) {
					tax = (round - secondband) * additional_tax;
				}
				return tax;
			}
			return 0;
		}

        //GROSS CAL
		function gross(inputNumber, hoursWorked) {
		    var adjustedFees = (hoursWorked === DEFAULT_HOURS) ? fees : 45;
			var earnings = inputNumber * hoursWorked;
			if (earnings - adjustedFees - mileage_expenses >= 0) {
				var gross1 = earnings - adjustedFees - mileage_expenses;
				
				if (hoursWorked === DEFAULT_HOURS) {
                    gross2 = ni_secondary * ni_rate;
                } else {
                    gross2 = monthly_ni_seconday * ni_rate;
                }
				
				var gross3 = 1 + ni_rate;
				var result = (gross1 + gross2) / gross3; //Gross calculation 
				return result;
			}
			return 0;
		}

        //GROSS CAL AND Employee NI Calculation
		function calculate(inputNumber, hoursWorked) {
		    var adjustedFees = (hoursWorked === DEFAULT_HOURS) ? fees : 45;
			var earnings = inputNumber * hoursWorked;
			if (earnings - adjustedFees - mileage_expenses >= 0) {
				var gross1 = earnings - adjustedFees - mileage_expenses;
				
				if (hoursWorked === DEFAULT_HOURS) {
                    gross2 = ni_secondary * ni_rate;
                } else {
                    gross2 = monthly_ni_seconday * ni_rate;
                }
				
				var gross3 = 1 + ni_rate;
				var result = (gross1 + gross2) / gross3; //Gross calculation 
				var additionalResult = result;
				
				if (hoursWorked === DEFAULT_HOURS){
				    if (additionalResult < primary_threshold) {
    					return 0;
    				} else if (additionalResult < upperlimit_uel) {
    					 nationalInsurance = (additionalResult - primary_threshold) * incomebt_primary_uel; // Employee NI Calculation
    					return nationalInsurance;
    				} else {
    					 nationalInsurance = (upperlimit_uel - primary_threshold) * incomebt_primary_uel + (additionalResult - upperlimit_uel) * income_inexcess; // Employee NI Calculation
    					return nationalInsurance;
    				}
				} else {
				    if (additionalResult < 1048) {
    					return 0;
    				} else if (additionalResult < 4189) {
    					 nationalInsurance = (additionalResult - 1048) * incomebt_primary_uel; // Employee NI Calculation
    					return nationalInsurance;
    				} else {
    					 nationalInsurance = (4189 - 1048) * incomebt_primary_uel + (additionalResult - 4189) * income_inexcess; // Employee NI Calculation
    					return nationalInsurance;
    				}
				}
			}
			return 0;
		}
	</script>
<!-- end of calculator script -->
	

    
<script>
document.getElementById('viewPdfBtn').addEventListener('click', function () {
    const inputNumber = document.getElementById('inputNumber').value;
    const Hoursworked = document.getElementById('Hoursworked').value;
    const result = document.getElementById('result').value;

    if (!inputNumber || !Hoursworked || !result) {
        alert("Please complete the fields before viewing the payslip.");
        return;
    }

    const isMobile = window.innerWidth <= 768;

    if (isMobile) {
        // Mobile behavior: generate and download the PDF directly
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = 'ombrella_payslip.php'; // PDF file generated from backend
        form.target = '_blank'; // Open in new tab to allow download
        form.style.display = 'none';

        form.appendChild(createHiddenInput('inputNumber', inputNumber));
        form.appendChild(createHiddenInput('Hoursworked', Hoursworked));
        form.appendChild(createHiddenInput('result', result));

        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    } else {
        // Desktop: Show PDF in iframe
        var pdfContainer = document.getElementById('pdfContainer');
        pdfContainer.style.display = 'block';

        const iframe = document.getElementById('pdfViewer');
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = 'ombrella_payslip.php#zoom=70';
        form.target = 'pdfViewerFrame';
        form.style.display = 'none';

        form.appendChild(createHiddenInput('inputNumber', inputNumber));
        form.appendChild(createHiddenInput('Hoursworked', Hoursworked));
        form.appendChild(createHiddenInput('result', result));

        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);

        iframe.scrollIntoView({ behavior: 'smooth' });
    }
});

function createHiddenInput(name, value) {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = name;
    input.value = value;
    return input;
}
</script>





<script>
const words = [
    "affordable",
    "reliable",
    "efficient",
    "dedicated",
];

let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
const speed = 150; // Typing speed
const dynamicText = document.getElementById("dynamic-text");

function typeEffect() {
    const currentWord = words[wordIndex];
    if (isDeleting) {
        charIndex--;
    } else {
        charIndex++;
    }

    dynamicText.textContent = currentWord.substring(0, charIndex);

    if (!isDeleting && charIndex === currentWord.length) {
        setTimeout(() => (isDeleting = true), 1000); // Pause before deleting
    } else if (isDeleting && charIndex === 0) {
        isDeleting = false;
        wordIndex = (wordIndex + 1) % words.length;
    }

    setTimeout(typeEffect, isDeleting ? speed / 2 : speed);
}

document.addEventListener("DOMContentLoaded", () => {
    setTimeout(typeEffect, 1000);
});
</script>

<script>
// JavaScript to control visibility based on screen width
function handleResponsiveDiv() {
  const mobileDiv = document.querySelector('.mobile-only');
  if (window.innerWidth <= 768) {
    mobileDiv.style.display = 'block';  // Show on mobile
  } else {
    mobileDiv.style.display = 'none';   // Hide on desktop
  }
}

// Call once at page load
handleResponsiveDiv();

// Also call when screen is resized
window.addEventListener('resize', handleResponsiveDiv);
</script>