jnmbh

Form Banners

We are Small Team of Creative People working together

Form 1 View Code
             <div class="bg-sec"> <section> <div id="banner1" class="banner spacer" style="background-image:url(assets/images/banner-bg.jpg);">
              <div class="container">
              <div class="row">
              <div class="col-md-7 col-lg-5 align-self-center" data-aos="fade-right" data-aos-duration="1500">
              <h2 class="title font-bold">Give your Business Real boost Now!</h2>
              <p class="m-t-40 m-b-30">To accomplish great things, we must not only act, but also dream; not only plan, but also believe.</p>
              <div class="m-t-40">
              <input type="text" name="email" placeholder="Enter Email Address" class="font-16" />
              <input type="submit" value="Get Started" class="bg-success-gradiant font-semibold font-16 btn-rounded text-uppercase text-white text-center" />
              </div>
              </div>
              <div class="col-md-5 col-lg-6 align-self-center ml-auto" data-aos="fade-left" data-aos-duration="1500">
              <img src="assets/images/banner-img.png" alt="We are Digital Agency" class="img-fluid" />
              </div>
              </div>
              </div>
              </div>
              </section>
              </div>
            
            
              
                #banner1 {
                  background: right -3em center no-repeat #e9f3f8;
                  h2 {
                    font-size: 48px;
                    line-height: 1;
                    letter-spacing: -1px;
                  }
                  input {
                    line-height: 72px;
                    padding: 0;
                    margin: 0;
                    border: none;
                    display: inline-block;
                    vertical-align: top;
                  }
                  input[type="text"] {
                    color: $bodytext;
                    border-radius: 36px 0 0 36px;
                    text-indent: 35px;
                    padding-right: 15px;
                    width: 61%;
                    font-weight: 300;
                    box-shadow: -5px 0 30px 0 rgba(0, 0, 0, 0.05);
                    text-overflow: ellipsis;
                  }
                  input[type="submit"] {
                    border-radius: 0 36px 36px 0;
                    width: auto;
                    padding: 0 30px;
                    cursor: pointer;
                    margin-left: -4px;
                    box-shadow: 5px 0 30px 0 rgba(0, 0, 0, 0.05);
                    transition: all 0.5s ease-in-out;
        
                    &:hover {
                      opacity: 0.7;
                    }
                  }
                }
        
                @media (min-width: 2301px) and (max-width: 2700px) {
                  #banner1 {
                    background-position: 70% center;
                  }
                }
        
                @media (min-width: 1900px) and (max-width: 2300px) {
                  #banner1 {
                    background-position: 80% center;
                  }
                }
        
                @media (min-width: 1500px) and (max-width: 1680px) {
                  #banner1 {
                    background-position: right center;
                  }
                }
        
                @media (max-width: 1100px) {
                  #banner1 {
                    background-position: right -14em center;
        
                    h2 {
                      font-size: 40px;
                    }
                    input[type="text"] {
                      width: 59%;
                    }
                    input[type="submit"] {
                      padding: 0 20px;
                    }
                  }
                }
        
                @media (max-width: 767px) {
                  .banner {
                    padding: 30px 0;
                  }
                  #banner1 {
                    background-image: none;
                    input {
                      font-size: 14px;
                      line-height: 50px;
                    }
                    input[type="text"] {
                      border-radius: 25px 0 0 25px;
                      text-indent: 20px;
                    }
                    input[type="submit"] {
                      border-radius: 0 25px 25px 0;
                      padding: 0 15px;
                    }
                    img {
                      margin-top: 25px;
                    }
                  }
                }
        
                @media (max-width: 320px) {
                  #banner1 {
                    input[type="submit"] {
                      padding: 0 10px;
                    }
                  }
                }
              
            
Form 2 View Code
              
                <div class="spacer form2">
                <div class="container">
                <div class="row">
                <!-- Column -->
                <div class="col-lg-6 p-r-40" data-aos="flip-up" data-aos-duration="1200">
                <img src="assets/images/1.jpg" class="img-shadow img-responsive" alt="Sapid" />
                </div>
        
                <div class="col-lg-6">
                <div class="text-box">
                <h1 class="font-light">Create your Free Account & Get Started Now</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing.</p>
                <form class="m-t-20" data-aos="fade-left" data-aos-duration="1200">
                <div class="row">
                <div class="col-lg-12">
                <div class="form-group">
                <input class="form-control" type="email" placeholder="email address">
                </div>
                </div>
                <div class="col-lg-6">
                <div class="form-group">
                <input class="form-control" type="password" placeholder="password">
                </div>
                </div>
                <div class="col-lg-6">
                <div class="form-group">
                <input class="form-control" type="password" placeholder="confirm password">
                </div>
                </div>
                <div class="col-lg-12 d-flex">
                <button type="submit" class="btn btn-md btn-danger-gradiant btn-arrow"><span> Create Account <i class="ti-arrow-right"></i></span></button>
                <div class="have-ac ml-auto align-self-center">Already have an account? <a href="#" class="text-danger">Sign In</a></div>
                </div>
                </div>
                </form>
                </div>
                </div>
                </div>
                </div>
                </div>
              
            
              
                @media (max-width: 1023px) {
                  .form2 {
                    h1 {
                      margin-top: 25px;
                    }
                    .have-ac {
                      margin-top: 25px;
                    }
                  }
                }
              
            
Sapid

Create your Free Account & Get Started Now

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing.

Create Account
Already have an account? Sign In
Form 3 View Code
              
                <div class="bg-sec">
                <section>
                <div id="banner2" class="banner spacer" style="background-image:url(assets/images/banner-bg.jpg);">
                <div class="container">
                <div class="row">
                <div class="col-md-7 col-lg-5" data-aos="fade-up" data-aos-duration="1500">
                <h2 class="title text-white font-semibold text-uppercase">Book Appointment</h2>
                <div class="bg-white">
                <div class="form-row b-b">
                <div class="p-30 left b-r w-50">
                <label class="text-inverse font-12 text-uppercase">First Name</label>
                <input type="text" class="b-0 p-0 font-14 form-control" placeholder="Your First Name" />
                </div>
                <div class="p-30 right w-50">
                <label class="text-inverse font-12 text-uppercase">Last Name</label>
                <input type="text" class="b-0 p-0 font-14 form-control" placeholder="Your Last Name" />
                </div>
                </div>
                <div class="form-row b-b p-30">
                <label class="text-inverse font-12 text-uppercase">Email Address</label>
                <input type="text" class="b-0 p-0 font-14 form-control" placeholder="Enter your Email Address" />
                </div>
                <div class="form-row b-b p-30">
                <label class="text-inverse font-12 text-uppercase">Phone Number</label>
                <input type="text" class="b-0 p-0 font-14 form-control" placeholder="Enter your Phone Number" />
                </div>
                <div class="form-row b-b p-30 po-relative">
                <label class="text-inverse font-12 text-uppercase">Booking Date</label>
                <div class="input-group date">
                <input type="text" class="b-0 p-0 font-14 form-control" id="dp" placeholder="Select the Appointment Date" />
                <label class="" for="dp"><i class="fa fa-calendar"></i></label>
                </div>
                </div>
                <div class="form-row b-b p-30">
                <label class="text-inverse font-12 text-uppercase">Message</label>
                <textarea col="1" row="1" class="b-0 font-light p-0 font-14 form-control" placeholder="Write Down the Message"></textarea>
                </div>
                <div>
                <button class="m-0 b-0 p-t-30 p-b-30 font-14 font-semibold bg-danger-gradiant btn btn-block btn-arrow text-center text-white text-uppercase">
                <span>Book Yor Appointment Now <i class="ti-arrow-right"></i></span>
                </button>
                </div>
                </div>
                </div>
                </div>
                </div>
                </div>
                </section>
                </div>
              
            
              
                #banner2 {
                  max-height: 800px;
                  .w-50 {
                    width: 50%;
                  }
                  .form-row {
                    margin: 0;
                  }
                  label.font-12 {
                    font-size: 12px;
                    font-weight: 500;
                    margin-bottom: 5px;
                  }
                  input[type=text] {
                    color: $bodytext;
                    font-weight: 300;
                    text-overflow: ellipsis;
                  }
                  button {
                    cursor: pointer;
                    border-radius: 0;
                  }
                  .date label {
                    cursor: pointer;
                    margin: 0;
                  }
                }
        
                @media (max-width: 370px) {
                  #banner2 {
                    .left,
                    .right {
                      padding: 25px;
                    }
                  }
                }
        
                @media (max-width: 320px) {
                  #banner2 {
                    .left,
                    .right {
                      padding: 25px 15px;
                    }
                  }
                }
              
            
Form 4 View Code
              
                <div class="spacer form4">
                <div class="container">
                <div class="row">
                <!-- Column -->
                <div class="col-lg-6 p-r-40" data-aos="flip-up" data-aos-duration="1200">
                <h1 class="font-light">Create stunning designs with our Sapid in minutes of time & with ease</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing. sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing.</p>
                <a href="#" data-toggle="modal" data-target="#exampleModal" class="video-link d-flex no-block m-t-30"><i class="icon-Play-Music text-danger m-r-10"></i> <span class="font-18 text-inverse align-self-center"> Watch Our Video</span></a>
                </div>
                <div class="modal fade" id="exampleModal">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title">Watch video</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
                </button>
                </div>
                <div class="modal-body" id="yt-player">
                <iframe width="100%" height="315" src="https://www.youtube.com/embed/DDwbjWCgxVM?" allowfullscreen></iframe>
                </div>
                </div>
                </div>
                </div>
                <div class="col-lg-5 ml-auto">
                <div class="text-box">
                <form data-aos="fade-left" data-aos-duration="1200">
                <div class="row">
                <div class="col-lg-6">
                <div class="form-group">
                <input class="form-control" type="text" placeholder="first name">
                </div>
                </div>
                <div class="col-lg-6">
                <div class="form-group">
                <input class="form-control" type="text" placeholder="last name">
                </div>
                </div>
                <div class="col-lg-12">
                <div class="form-group">
                <input class="form-control" type="email" placeholder="email address">
                </div>
                </div>
                <div class="col-lg-6">
                <div class="form-group">
                <input class="form-control" type="password" placeholder="password">
                </div>
                </div>
                <div class="col-lg-6">
                <div class="form-group">
                <input class="form-control" type="password" placeholder="confirm password">
                </div>
                </div>
                <div class="col-lg-12">
                <div class="form-group">
                <div class="col-auto my-1">
                <div class="custom-control custom-checkbox mr-sm-2">
                <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
                <label class="custom-control-label" for="customControlAutosizing">I agree with the <a href="#" class="link">terms and conditions</a></label>
                </div>
                </div>
                </div>
                </div>
                <div class="col-lg-12 d-flex">
                <button type="submit" class="btn btn-md btn-block btn-info-gradiant btn-arrow"><span> Create Account <i class="ti-arrow-right"></i></span></button>
                </div>
                </div>
                </form>
                </div>
                </div>
                </div>
                </div>
                </div>
              
            
              
                .form4 {
                  .video-link {
                    i {
                      font-size: 36px;
                    }
                  }
                }
        
                @media (max-width: 1023px) {
                  .form4 {
                    .text-box {
                      margin-top: 25px;
                    }
                  }
                }
              
            

Create stunning designs with our Sapid in minutes of time & with ease

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing. sit amet, consectetuer adipiscing elit, sed diam nonummy consectetuer adipiscing.

Watch Our Video
Form 5 View Code
              
                <div class="spacer form5" style="background-image:url(assets/images/2.jpg)">
                <div class="container">
                <!-- Row -->
                <div class="row justify-content-center">
                <div class="col-lg-4 col-md-7 text-center both-space">
                <div class="card" data-aos="flip-left" data-aos-duration="1200">
                <div class="card-body">
                <div class="text-box">
                <h2 class="title font-light"><span class="font-stylish">Make</span> <br> Reservation</h2>
                <form class="m-t-30">
                <div class="row">
                <div class="col-lg-12">
                <div class="form-group">
                <input class="form-control" type="text" placeholder="your name">
                </div>
                </div>
        
                <div class="col-lg-12">
                <div class="form-group">
                <input class="form-control" type="email" placeholder="email address">
                </div>
                </div>
                <div class="col-lg-12">
                <div class="form-group">
                <input class="form-control" type="text" placeholder="phone number">
                </div>
                </div>
                <div class="col-lg-12">
                <div class="form-group input-icon">
                <input class="form-control po-relative" id="dp1" type="text" placeholder="choose date">
                <i class="fa fa-calendar po-absolute"></i>
                </div>
                </div>
                <div class="col-lg-6">
                <div class="form-group">
                <select class="form-control">
                <option>hour</option>
                <option>1</option>
                <option>2</option>
                </select>
                </div>
                </div>
                <div class="col-lg-6">
                <div class="form-group">
                <select class="form-control">
                <option>min</option>
                <option>1</option>
                <option>2</option>
                </select>
                </div>
                </div>
                <div class="col-lg-12 d-flex">
                <button type="submit" class="btn btn-md btn-block btn-danger-gradiant btn-arrow"><span> Reserve Table For Me <i class="ti-arrow-right"></i></span></button>
                </div>
                </div>
                </form>
                </div>
                </div>
                </div>
                </div>
                </div>
                </div>
                </div>
              
            
              
                .form5 {
                  background-size: cover;
                  background-attachment: fixed;
                  background-position: left center;
                  .text-box {
                    padding: 10px 15px;
                  }
                  .input-icon {
                    i {
                      top: 17px;
                      right: 30px;
                    }
                  }
                }
              
            

Make
Reservation

Form 6 View Code
              
                <div class="form6 spacer">
                <!-- Row  -->
                <div class="row">
                <div class="container">
                <div class="col-lg-6 align-justify-center p-r-40 p-l-0 contact-form">
                <div class="" data-aos="fade-right" data-aos-duration="1200">
                <h1 class="title font-light">Get Register For Free</h1>
                <h6 class="subtitle">Lorem ipsum dolor sit amet, consectetuer adipiscing.</h6>
                <form class="m-t-30" data-aos="fade-right" data-aos-duration="1200">
                <div class="row">
                <div class="col-lg-12">
                <div class="form-group">
                <input class="form-control" type="text" placeholder="full name">
                </div>
                </div>
                <div class="col-lg-12">
                <div class="form-group">
                <input class="form-control" type="email" placeholder="email address">
                </div>
                </div>
                <div class="col-lg-6">
                <div class="form-group">
                <input class="form-control" type="password" placeholder="password">
                </div>
                </div>
                <div class="col-lg-6">
                <div class="form-group">
                <input class="form-control" type="password" placeholder="confirm password">
                </div>
                </div>
                <div class="col-lg-12">
                <button type="submit" class="btn btn-md btn-block btn-danger-gradiant btn-arrow"><span> Create Account <i class="ti-arrow-right"></i></span></button>
                <!--  -->
                </div>
                </div>
                </form>
                <div class="row">
                <div class="col-lg-12 text-center m-t-40">
                <h6>Signup with Social Accounts</h6>
                <div class="row">
                <div class="col-lg-6 col-md-6">
                <a href="#" class="btn btn-block bg-facebook text-white m-t-15">Facebook</a>
                </div>
                <div class="col-lg-6 col-md-6">
                <a href="#" class="btn btn-block bg-twitter text-white m-t-15">Twitter</a>
                </div>
                </div>
                </div>
                <div class="col-lg-12 text-center m-t-30">
                Already have an account? <a href="#" class="text-danger">Sign In</a>
                </div>
                </div>
                </div>
                </div>
                </div>
                <div class="col-lg-6 right-image" style="background-image:url(assets/images/3.jpg);" data-aos="fade-left" data-aos-duration="3000" data-aos-offset="500">
                </div>
                </div>
                </div>
              
            
              
                .form6 {
                  overflow: hidden;
                  position: relative;
                  .right-image {
                    background-position: center bottom;
                    background-size: cover;
                    background-repeat: none;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    top: 0;
                  }
                }
        
                @media (max-width: 1023px) {
                  .form6 {
                    .contact-form {
                      padding-left: 0;
                      padding-right: 0;
                    }
                  }
                }
        
                @media (max-width: 767px) {
                  .form6 {
                    .contact-form {
                      padding-left: 15px;
                      padding-right: 15px;
                    }
                  }
                }
              
            

Get Register For Free

Lorem ipsum dolor sit amet, consectetuer adipiscing.
Signup with Social Accounts
Already have an account? Sign In
Form 7 View Code
              
                <div class="form8 spacer">
                <div class="container">
                <div class="row">
                <!-- column  -->
                <div class="col-lg-5">
                <h6 class="text-themecolor text-uppercase">newsletter</h6>
                <h2 class="title">Stay informed about new and upcoming causes</h2>
                <h6 class="subtitle m-t-30">It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h6>
                <form class="m-t-30">
                <div class="form-group">
                <input class="form-control" type="text" placeholder="Your Name" />
                </div>
                <div class="form-group">
                <input class="form-control" type="email" placeholder="Email Address" />
                </div>
                <div class="form-group">
                <button class="btn btn-danger-gradiant btn-block btn-md text-uppercase ">Subscribe </button>
                </div>
                <div class="form-group">
                <div class="my-1">
                <div class="custom-control custom-checkbox mr-sm-2">
                <input type="checkbox" class="custom-control-input" id="customControlAutosizing1">
                <label class="custom-control-label" for="customControlAutosizing1">I read and agree to the <a href="#" class="link">terms and conditions</a></label>
                </div>
                </div>
                </div>
                </form>
                </div>
                <!-- column  -->
                <div class="col-lg-6 ml-auto">
                <div class="d-flex b-b p-b-20 no-block font-medium text-uppercase">
                <h6 class="no-shrink font-medium align-self-center m-b-0">Latest News At Sapid</h6>
                <a class="ml-auto text-danger align-self-center" href="#">View All</a>
                </div>
                <div class="row blog-row m-t-40">
                <div class="col-md-4">
                <a href="#"><img src="assets/images/img12.jpg" alt="Sapid" class="img-responsive" /></a>
                </div>
                <div class="col-md-8">
                <h5><a href="#">The Universe is all of time and space and its contents.</a></h5>
                <p>by <a href="#">Mark Freeman</a> / 08 Oct 2022</p>
                </div>
                </div>
                <div class="row blog-row m-t-30">
                <div class="col-md-4">
                <a href="#"><img src="assets/images/img13.jpg" alt="Sapid" class="img-responsive" /></a>
                </div>
                <div class="col-md-8">
                <h5><a href="#">Pellentesque mollis eros quis massa interdum porta et vel nisi. Duis vel viverra quamam...</a></h5>
                <p>by <a href="#">Mark Freeman</a> / 08 Oct 2022</p>
                </div>
                </div>
                <div class="row blog-row m-t-30">
                <div class="col-md-4">
                <a href="#"><img src="assets/images/img14.jpg" alt="Sapid" class="img-responsive" /></a>
                </div>
                <div class="col-md-8">
                <h5><a href="#">Duis vel viverra quamam molesvulputate femy contenteu.</a></h5>
                <p>by <a href="#">Mark Freeman</a> / 08 Oct 2022</p>
                </div>
                </div>
                </div>
                <!-- column  -->
                </div>
                </div>
                </div>
              
            
              
                .form8 {
                  .blog-row {
                    margin-bottom: 30px;
                    a {
                      color: $dark;
                      &:hover {
                        color: $themecolor;
                      }
                    }
                    h5 {
                      font-weight: 500;
                      margin-top: 10px;
                    }
                  }
                }
              
            
newsletter

Stay informed about new and upcoming causes

It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Latest News At Sapid
View All
Sapid31
The Universe is all of time and space and its contents.

by Mark Freeman / 08 Oct 2022

Sapid232
Pellentesque mollis eros quis massa interdum porta et vel nisi. Duis vel viverra quamam...

by Mark Freeman / 08 Oct 2022

Sapid34
Duis vel viverra quamam molesvulputate femy contenteu.

by Mark Freeman / 08 Oct 2022

Form 8 View Code
              
                <div class="bg-sec">
                <section>
                <div id="banner4" class="banner" style="background-image:url(assets/images/banner-bg.jpg);">
                <div class="banner-content">
                <div class="container" data-aos="fade-down" data-aos-duration="1500">
                <h2 class="title text-white text-center font-bold m-b-30">Find your Dream Travel Place</h2>
                <div class="row form-data">
                <div class="col-sm-6 col-md-3 b-r p-b-10 p-t-10 bg-white sec-icon po-relative">
                <i class="fa fa-map-marker text-danger"></i>
                <span class="span-select b-b m-l-20">
                <select class="b-0 form-control text-uppercase">
                <option>Destination</option>
                </select>
                <i class="fa fa-angle-down"></i>
                </span>
                </div>
                <div class="col-sm-6 col-md-3 b-r p-b-10 p-t-10 bg-white sec-icon po-relative">
                <i class="fa fa-list text-danger"></i>
                <span class="span-select b-b m-l-20">
                <select class="b-0 form-control text-uppercase">
                <option>Tour Type</option>
                </select>
                <i class="fa fa-angle-down"></i>
                </span>
                </div>
                <div class="col-sm-6 col-md-3 b-r p-b-10 p-t-10 bg-white sec-icon po-relative">
                <div class="input-group date">
                <input type="text" id="dp9" placeholder="Month" class="text-uppercase form-control b-b" />
                <label clas="input-group-addon" for="dp9"><i class="fa fa-calendar text-danger"></i></label>
                </div>
                </div>
                <div class="col-sm-6 col-md-2 p-b-10 p-t-10 bg-white">
                <input type="text" name="" placeholder="Max Price" class="text-uppercase form-control b-b" />
                </div>
                <div class="col-md-1 p-0">
                <button class="b-0 text-center bg-success-gradiant text-white font-14 form-control"><i class="ti-search"></i></button>
                </div>
                </div>
                </div>
                </div>
                </div>
                </section>
                </div>
              
            
            
              #banner4 {
                h2 {
                  font-size: 36px;
                  line-height: 1.2;
                }
                button {
                  border-radius: 0;
                  line-height: 43px;
                  transition: all 0.5s ease-in-out;
                  cursor: pointer;
                  font-size: 20px;
        
                  &:hover {
                    opacity: 0.95;
                  }
                }
                input,
                .span-select {
                  border-radius: 0;
                  font-size: 12px;
                  line-height: 1.7;
                  border: none;
                  border-bottom: 1px solid rgba(120, 130, 140, 0.13);
                  color: $bodytext;
                  font-weight: 300;
                  display: block;
                }
                .form-data {
                  border: 15px solid rgba(34, 50, 70, 0.5);
        
                  select {
                    background: tranparent;
                    font-size: 12px;
                    color: $bodytext;
                    font-weight: 300;
                  }
                  .sec-icon {
                    i {
                      left: 15px;
                      top: 18px;
                      position: absolute;
                      font-size: 20px;
                      z-index: 10;
                    }
                  }
                  .date label {
                    position: absolute;
                    right: 15px;
                    top: 8px;
        
                    i {
                      left: 0;
                      top: 0;
                    }
                  }
                  .span-select {
                    overflow: hidden;
                    position: relative;
        
                    i {
                      right: 0;
                      top: 8px;
                      left: auto;
                      position: absolute;
                      font-size: 20px;
                    }
                    select {
                      min-width: 250px;
                    }
                  }
        
                }
              }
        
              @media (max-width: 767px) {
                #banner4 {
                  .b-b {
                    border: none;
                  }
                  h2 {
                    font-size: 32px;
                  }
                  input {
                    margin-left: 20px;
                  }
                }
              }
        
              @media (max-width: 428px) {
                #banner4 {
                  .form-data {
                    overflow: hidden;
        
                    .span-select {
                      select {
                        width: 110%;
                      }
                    }
                  }
                }
              }
        
              @media (max-width: 320px) {
                #banner4 {
                  input,
                  select {
                    padding-left: 0;
                    padding-right: 0;
                  }
                  input {
                    margin-left: 45px;
                  }
                  .form-data {
        
                    .bg-white {
                      padding-left: 0;
                      padding-right: 0;
                    }
                    .sec-icon {
                      i {
                        left: 10px;
                      }
                    }
                    .date {
                      label {
                        right: 25px;
                      }
                    }
                    .span-select {
                      i {
                        right: 10px;
                        left: auto;
                      }
                      select {
                        margin-left: 20px;
                        width: 100%;
                      }
                    }
                  }
                }
              }