<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UTS SERVICES</title>
    <!-- bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <!-- static css -->
    <link rel="stylesheet" href="css/style.css">

    
    <!-- font-awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/"
        }
      }
    </script>
    
  </head>
  <body>
    <header>
      <!-- navbar -->
      <nav class="navbar">
        <h2 class="logo"><a href="#">U.T.S</a></h2>
        <input type="checkbox" id="menu-toggler">
        <label for="menu-toggler" id="hamburger-btn">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px">
            <path d="M0 0h24v24H0z" fill="none"/>
            <path d="M3 18h18v-2H3v2zm0-5h18V11H3v2zm0-7v2h18V6H3z"/>
          </svg>
        </label>
        <ul class="all-links">
          
          <li><a href="#home">Home
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
              <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
            </svg>
          </a></li>
          <li><a href="#services">Services
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-raised-hand" viewBox="0 0 16 16">
              <path d="M6 6.207v9.043a.75.75 0 0 0 1.5 0V10.5a.5.5 0 0 1 1 0v4.75a.75.75 0 0 0 1.5 0v-8.5a.25.25 0 1 1 .5 0v2.5a.75.75 0 0 0 1.5 0V6.5a3 3 0 0 0-3-3H6.236a.998.998 0 0 1-.447-.106l-.33-.165A.83.83 0 0 1 5 2.488V.75a.75.75 0 0 0-1.5 0v2.083c0 .715.404 1.37 1.044 1.689L5.5 5c.32.32.5.754.5 1.207"/>
              <path d="M8 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>
            </svg>
          </a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="/career">Careers</a></li>
          <li><a href="#contact">
            Contact Us
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-forward" viewBox="0 0 16 16">
              <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zm10.762.135a.5.5 0 0 1 .708 0l2.5 2.5a.5.5 0 0 1 0 .708l-2.5 2.5a.5.5 0 0 1-.708-.708L14.293 4H9.5a.5.5 0 0 1 0-1h4.793l-1.647-1.646a.5.5 0 0 1 0-.708z"/>
            </svg>
          </a></li>
          <li>
            <div style="padding-right: 30px; padding-left: 30px;" class="dropdown dr-div">
              <button  class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                SIGN UP
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-index-thumb-fill" viewBox="0 0 16 16">
                  <path d="M8.5 1.75v2.716l.047-.002c.312-.012.742-.016 1.051.046.28.056.543.18.738.288.273.152.456.385.56.642l.132-.012c.312-.024.794-.038 1.158.108.37.148.689.487.88.716.075.09.141.175.195.248h.582a2 2 0 0 1 1.99 2.199l-.272 2.715a3.5 3.5 0 0 1-.444 1.389l-1.395 2.441A1.5 1.5 0 0 1 12.42 16H6.118a1.5 1.5 0 0 1-1.342-.83l-1.215-2.43L1.07 8.589a1.517 1.517 0 0 1 2.373-1.852L5 8.293V1.75a1.75 1.75 0 0 1 3.5 0"/>
                </svg> 
              </button>
              <ul class="dropdown-menu">
                <li><a class="dr dropdown-item" href="/signup_user">As User</a></li>
                <li><a class="dr dropdown-item" href="/signup_volunteer">As Volunteer</a></li>
                <li><a class="dr dropdown-item" href="/signup_driver">As Driver</a></li>
                
              </ul>
            </div>
          </li>
          <li>
            <div class="dropdown dr-div">
              <button class="btn btn-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                LOGIN 
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-in-right" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0z"/>
                  <path fill-rule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
                </svg>
              </button>
              <ul class="dropdown-menu">
                <li><a class="dr dropdown-item" href="/login_user">As User</a></li>
                <li><a class="dr dropdown-item" href="/login_vol">As Volunteer</a></li>
                <li><a class="dr dropdown-item" href="/login_driver">As Driver</a></li>
                
              </ul>
            </div>
          </li>
          </ul>
          
          
      </nav>
    </header>
<!-- home -->
    <section class="homepage" id="home">
      <div class="content">
        <div class="text">
            <div class="main">
          <h1>United Transit Services</h1>
          
          <p> Accessible travel for everyone, ensuring smooth journeys without limitations."</p>
            </div>
        </div>

       
        <a href="#services">Our Services</a>
        <br>
        <a href="/book_cab">Get Started</a>
      </div>
      
    </section>
    
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>



    <section class="services" id="services">
      <h2 >Our Services</h2>
      <p>Explore our wide range of car services</p>
      <ul class="cards">
        <li class="card">
          <img src="images/raw-of-cars.jpg" alt="img">
          <h3>Airport and Railway Stations</h3>
          <p>Reliable and efficient airport and station transfers, ensuring timely and comfortable transportation for seamless travel experiences."</p>
        </li>
        <li class="card">
          <img src="images/set-of-cars.jpg" alt="img">
          <h3>Hourly Rentals</h3>
          <p>"Flexible hourly rentals tailored to your schedule, offering on-demand transportation with the freedom to make multiple stops as needed."</p>
        </li>
        <li class="card">
          <img src="images/taxi.jpg" alt="img">
          <h3>Point to point transportation</h3>
          <p>"Efficient point-to-point transportation, providing hassle-free rides from your location to your destination with convenience and reliability."</p>
        </li>
        <li class="card">
          <img src="images/butler.jpg" alt="img">
          <h3>Corporate Services</h3>
          <p>Providing transportation solutions for corporate clients, including employee commuting, executive travel, and business-related transportation.</p>
          </li>
          <li class="card">
            <img src="images/portfolio 3.png" alt="img">
            <h3>Volunteer Service</h3>
            <p>Providing Volunteers for elderly and disabled to ensure safe and secure transportation</p>
            </li>
            <li class="card">
              <img src="images/top-bg.jpg" alt="img">
              <h3>Bleeding Edge Technology</h3>
              <p>Advanced Technologies like face recognition, heart rate monitoring, and sound assisted payment, and much more</p>
              </li>
          </ul>
    </section>

    <!-- colaboration -->

    <section class="gradient-background" id="portfolio">
      <h2>Collaborations</h2>
      <p>Take a look at some of social organisations</p>
      <ul class="cards">
        <li class="card">
          <img src="images/portfolio 1.png" alt="img">
          <h3>Samarthanam Trust</h3>
          <p></p>
        </li>
        <li class="card">
          <img src="images/portfolio 2.png" alt="img">
          <h3>Sarthak Educational Trust</h3>
          <p></p>
        </li>
        <li class="card">
          <img src="images/portfolio 3.png" alt="img" style="padding-top: 25px;">
          <h3>Diya Foundation</h3>
          <p></p>
        </li>
        <li class="card">
          <img src="images/AshaKiran.png" alt="img" style="top: 25px;">
          <h3>AshaKiran</h3>
          <p></p>
        </li>
        <li class="card">
          <img src="images/Abhilasha Foundation.png" alt="img">
          <h3>Abhilasha Foundation</h3>
          <p></p>
        </li>
        <li class="card">
          <img src="images/Shraddhanand mahilashram.png" alt="img" style="padding-top: 25px;">
          <h3>Shraddhanand mahilashram</h3>
          <p></p>
        </li>
      </ul>
    </section>


   <!-- circles About -->

    <section class="about" id="about">
      <h2>About Us</h2>
      <p>Dive into our story.</p>
      </section>
      <!-- cirlce Mission Vission-->
    <div  class="container">
      <div class="row">
        <!-- card1 -->
         <div class="card card-circle">
            <div class="card-icon">
               
            </div>
            <div class="card-body">
               <h5 class="card-title">Our Story</h5>
               <p class="card-text">Driven by inclusivity, our cab service was born from a personal journey of overcoming mobility challenges. 
                 </p>
               <a href="#" class="btn btn-primary">Read More</a>
            </div>
         </div>
         <!-- card2 -->
         <div class="card card-circle">
            <div class="card-icon">
               <i class="fas fa-cookie"></i>
            </div>
            <div class="card-body">
               <h5 class="card-title">Our Mission</h5>
               <p class="card-text">Our mission is to redefine mobility for every individual, fostering inclusivity and accessibility in transportation.</p>
               <a href="#" class="btn btn-primary">Read More</a>
            </div>
         </div>
         <!-- card3 -->
         <div class="card card-circle ">
            <div class="card-icon">
               <i class="fas fa-carrot"></i>
            </div>
            <div class="card-body">
               <h5 class="card-title">Our Vision</h5>
               <p class="card-text">Envisioning a world where transportation knows no barriers, our mission is to pioneer a cab service that 
                champions accessibility for all.</p>
               <a href="#" class="btn btn-primary">Read More</a>
            </div>
         </div>
      </div>
   </div>


      <br>
      <br>
      <br>
      <section class="team about" id="about">
        <h2>Our Team</h2>
        <p>Meet the creators</p>
        </section>
<!--New yellow Team -->


<div class="teamates">

  <div id="carousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carousel" data-bs-slide-to="0" class="" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carousel" data-bs-slide-to="1" aria-label="Slide 2" class="active" aria-current="true"></button>
      <button type="button" data-bs-target="#carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
      
  
      

    </div>
    <div class="bd-example carousel-inner m-0 border-0">
      <div class="carousel-item" data-bs-interval="5000" data-bs-touch="true">
        <svg  width="800" height="630"  role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>About</title></svg>
        <div class="carousel-caption d-none d-md-block">
          <section class="wrapper">
            <div class="container">
              
            <div class="row">
           <div class="col-sm-12 col-md-6 col-lg-4 mb-4"><div class="team-card card text-dark card-has-bg  click-col" style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
                   <img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
                  <div class="card-img-overlay d-flex flex-column">
                   <div class="card-body">
                      <small class="card-meta mb-2">Front-end | Backend</small>
                      <h4 class="card-title mt-0 ">Alan Saji</h4>
                     <small> 21BCG10140</small>
                    </div>
                    <div class="card-footer">
                     <div class="media">
            
            <div class="media-body">
              <h6 class="my-0 text-dark d-block">Connect with me</h6>
              <a class="link-profile" href="#"><i class="fa fa-dribbble"></i></a> 
                        <a class="link-profile" href="#"><i class="fa fa-twitter"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-linkedin"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-facebook"></i></a> 
               
            </div>
          </div>
                    </div>
                  </div>
                </div></div>
                <div class="col-sm-12 col-md-6 col-lg-4 mb-4"><div class="team-card card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tree,nature');">
                  <img class="card-img d-none" src="https://source.unsplash.com/600x900/?tree,nature" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">

                 <div class="card-img-overlay d-flex flex-column">
                  <div class="card-body">
                     <small class="card-meta mb-2">Front-end | Team Leader</small>
                     <h4 class="card-title mt-0 ">Mansaa Narang</h4>
                    <small> 21BCE10510</small>
                   </div>
                   <div class="card-footer">
                    <div class="media">
           
           <div class="media-body">
             <h6 class="my-0 text-dark d-block">Connect with me</h6>
             <a class="link-profile" href="#"><i class="fa fa-dribbble"></i></a> 
                       <a class="link-profile" href="#"><i class="fa fa-twitter"></i></a>  
                       <a class="link-profile" href="#"><i class="fa fa-linkedin"></i></a>  
                       <a class="link-profile" href="#"><i class="fa fa-facebook"></i></a> 
              
           </div>
         </div>
                   </div>
                 </div>
               </div></div>


               

            <div class="col-sm-12 col-md-6 col-lg-4 mb-4"><div class="team-card card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?computer,design');">
                   <img class="card-img d-none" src="https://source.unsplash.com/600x900/?computer,design" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
                  <div class="card-img-overlay d-flex flex-column">
                   <div class="card-body">
                      <small class="card-meta mb-2">Backend | Database</small>
                      <h4 class="card-title mt-0 ">Mehak Agarwal</h4>
                     <small><i class="far fa-clock"></i> 21BCE10312</small>
                    </div>
                    <div class="card-footer">
                     <div class="media">
           
            <div class="media-body">
              <h6 class="my-0 text-dark d-block">Connect with me</h6>
              <a class="link-profile" href="#"><i class="fa fa-dribbble"></i></a> 
                        <a class="link-profile" href="#"><i class="fa fa-twitter"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-linkedin"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-facebook"></i></a> 
               
            </div>
          </div>
                    </div>
                  </div>
                </div></div>
             
            
            
          </div>
            
          </div>
          </section>
          
        </div>
      </div>
      <div class="carousel-item active" data-bs-interval="5000" data-bs-touch="true">
        <svg  width="800" height="630"  role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>About</title></svg>
        <div class="carousel-caption d-none d-md-block">
          <section class="wrapper">
            <div class="container">
              
            <div class="row">
           
             
              <div class="col-sm-12 col-md-6 col-lg-4 mb-4"><div class="team-card card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
                   <img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt=" Lorem Ipsum Sit Amet Consectetur dipisi?">
                  <div class="card-img-overlay d-flex flex-column">
                   <div class="card-body">
                      <small class="card-meta mb-2">Backend | Database</small>
                      <h4 class="card-title mt-0 ">Aditya Nair</h4>
                     <small><i class="far fa-clock"></i> 21BCE10531</small>
                    </div>
                    <div class="card-footer">
                     <div class="media">
           
            <div class="media-body">
              <h6 class="my-0 text-dark d-block">Connect with me</h6>
              <a class="link-profile" href="#"><i class="fa fa-dribbble"></i></a> 
                        <a class="link-profile" href="#"><i class="fa fa-twitter"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-linkedin"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-facebook"></i></a> 
               
            </div>
          </div>
                    </div>
                  </div>
                </div></div>
               <div class="col-sm-12 col-md-6 col-lg-4 mb-4"><div class="team-card card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tree,nature');">
                   <img class="card-img d-none" src="https://source.unsplash.com/600x900/?tree,nature" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
                  <div class="card-img-overlay d-flex flex-column">
                   <div class="card-body">
                      <small class="card-meta mb-2">Backend | Database</small>
                      <h4 class="card-title mt-0 ">Arihant Aggarwal
                      </h4>
                     <small><i class="far fa-clock"></i> 21BCE10374</small>
                    </div>
                    <div class="card-footer">
                     <div class="media">
            
            <div class="media-body">
              <h6 class="my-0 text-dark d-block">Connect with me</h6>
              <a class="link-profile" href="#"><i class="fa fa-dribbble"></i></a> 
                        <a class="link-profile" href="#"><i class="fa fa-twitter"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-linkedin"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-facebook"></i></a> 
               
            </div>
          </div>
                    </div>
                  </div>
                </div></div>
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4"><div class="team-card card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?computer,design');">
                   <img class="card-img d-none" src="https://source.unsplash.com/600x900/?computer,design" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
                  <div class="card-img-overlay d-flex flex-column">
                   <div class="card-body">
                      <small class="card-meta mb-2">Backend | AIML</small>
                      <h4 class="card-title mt-0 ">Priyanshu Agnihotri
                      </h4>
                     <small><i class="far fa-clock"></i> 21BCE11637</small>
                    </div>
                    <div class="card-footer">
                     <div class="media">
            
            <div class="media-body">
              <h6 class="my-0 text-dark d-block">Connect with me</h6>
              <a class="link-profile" href="#"><i class="fa fa-dribbble"></i></a> 
                        <a class="link-profile" href="#"><i class="fa fa-twitter"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-linkedin"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-facebook"></i></a> 
               
            </div>
          </div>
                    </div>
                  </div>
                </div></div>
            
          </div>
            
          </div>
          </section>
          
        </div>
      </div>
      <div class="carousel-item" data-bs-touch="true">
        <svg  width="800" height="630"  role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>About</title></svg>
          
        </svg>
        
        <div class="carousel-caption d-none d-md-block">
          <section class="wrapper">
            <div class="container">
              
            <div  class="row">
           <div  class="col-sm-12 col-md-6 col-lg-4 mb-4"><div class="team-card card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tech,street');">
                   <img class="card-img d-none" src="https://source.unsplash.com/600x900/?tech,street" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
                  <div class="card-img-overlay d-flex flex-column">
                   <div class="card-body">
                      <small class="card-meta mb-2">Research | Documentation</small>
                      <h4 class="card-title mt-0 ">Karabi Debbarma</h4>
                     <small><i class="far fa-clock"></i> 21BOE10010</small>
                    </div>
                    <div class="card-footer">
                     <div class="media">
            
            <div class="media-body">
              <h6 class="my-0 text-dark d-block">Connect with me</h6>
              <a class="link-profile" href="#"><i class="fa fa-dribbble"></i></a> 
                        <a class="link-profile" href="#"><i class="fa fa-twitter"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-linkedin"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-facebook"></i></a> 
               
            </div>
          </div>
                    </div>
                  </div>
                </div></div>
               <div  class="col-sm-12 col-md-6 col-lg-4 mb-4"><div class="team-card card text-dark card-has-bg click-col" style="background-image:url('https://source.unsplash.com/600x900/?tree,nature');">
                   <img class="card-img d-none" src="https://source.unsplash.com/600x900/?tree,nature" alt="Creative Manner Design Lorem Ipsum Sit Amet Consectetur dipisi?">
                  <div class="card-img-overlay d-flex flex-column">
                   <div class="card-body">
                      <small class="card-meta mb-2">Research | Documentation</small>
                      <h4 class="card-title mt-0 ">Shivangi</h4>
                     <small><i class="far fa-clock"></i> 21BCE10000</small>
                    </div>
                    <div class="card-footer">
                     <div class="media">
           
            <div class="media-body">
              <h6 class="my-0 text-dark d-block">Connect with me</h6>
              <a class="link-profile" href="#"><i class="fa fa-dribbble"></i></a> 
                        <a class="link-profile" href="#"><i class="fa fa-twitter"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-linkedin"></i></a>  
                        <a class="link-profile" href="#"><i class="fa fa-facebook"></i></a> 
               
            </div>
          </div>
                    </div>
                  </div>
                </div></div>
                <div  class="col-sm-12 col-md-6 col-lg-4 mb-4"><div class="team-card card text-dark card-has-bg click-col">
                  
                 <div class="card-img-overlay d-flex flex-column">
                  <div class="card-body">
                     <small class="card-meta mb-2"></small>
                     <h4 class="card-title mt-0 ">Connect with us on our linkdn handles!</h4>
                     <img style="padding-top: 50px;" width="100px" src="images/link (1).png" alt="">
                   </div>
                   <div class="card-footer">
                    <div class="media">
          
           
         </div>
                   </div>
                 </div>
               </div></div>

          </section>

        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>
  
  
  <div class="car" id="car"></div>

  <div style="display: flex; justify-content: space-around; padding: 0 20px; background-color:#ffe484; padding: 10px;" class="cont">
    <h2 style="margin: 0;">Small hatchbacks</h2>
    <h2 style="margin: 0;">Medium Sized SUVs</h2>
    <h2 style="margin: 0;">Large 7-Seaters</h2>
  </div>
  <!-- contact  -->
    <section class="contact" id="contact">
      <h2 style="color: white;">Contact Us</h2>
      <p style="color: white;">Reach out to us for any inquiries or feedback.</p>
      <div class="row">
        <div class="col information" style="color: whitesmoke;">
          <div class="contact-details" style="color: whitesmoke;">

            <p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
              <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
            </svg> UTSservice@gmail.com</p>
            <p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
            </svg>+919267892340</p>
            <p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16">
              <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9z"/>
              <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5M13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1"/>
            </svg> 9:00AM-7:00PM</p>
            <p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe-americas" viewBox="0 0 16 16">
              <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484-.08.08-.162.158-.242.234-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"/>
            </svg>India </p>
          </div>
        </div>

        <div class="col form">
          <form action="https://formspree.io/f/mrgwvjvo" method="POST">
            <input name="Name" type="text" placeholder="Name*" required>
            <input type="email" name="email" placeholder="Email*" required>
            <textarea name="message" placeholder="Message*" required></textarea>
            <button id="submit" type="submit">Send Message</button>
              
          </form>
        </div>
      </div>
    </section>
    <section id="footer" class="gradient-background">
        <footer class="pt-4 pt-md-5 border-top">
          <div class="row">
            <div class="col-12 col-md">
              
              <small class="d-block mb-3 text-body-secondary">Â©UTI <br>2024</small>
            </div>
            <div class="col-6 col-md">
              <h5>Features</h5>
              <ul class="list-unstyled text-small">
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
              </ul>
            </div>
            <div class="col-6 col-md">
              <h5>Resources</h5>
              <ul class="list-unstyled text-small">
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
              </ul>
            </div>
            <div class="col-6 col-md">
              <h5>About</h5>
              <ul class="list-unstyled text-small">
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li>
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
                <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
              </ul>
            </div>
          </div>
        </footer>
    
      </section>
      
      <script type="module" src="js/car.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
