index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./arsha.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous">
  </script>
  <script src="https://code.iconify.design/iconify-icon/1.0.1/iconify-icon.min.js"></script>

  <title> Arsha </title>
</head>

<body>
  <div class=" bgcolor text-light position-relative px-20 bgcolor-sm ">
    <nav class="navbar  sticky-top navbar-expand-lg headbgcolor text-light position-sticky px-lg-5">
      <div class="container-fluid ">
        <a class="navbar-brand text-light ms-lg-5 fs-2 fw-semibold" href="#">PrecisionEdits</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class=""><i class="fa fa-bars" style="font-size:28px;color:white"></i></span>
        </button>
        <div class="collapse navbar-collapse float-end flex-grow-0 p-2" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active text-light" aria-current="page" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-light" aria-current="page" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-light" aria-current="page" href="#service">Service</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-light" aria-current="page" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-light" aria-current="page" href="#team">Team</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle text-light" href="#" role="button" data-bs-toggle="dropdown"
                aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu text-light">
                <li><a class="dropdown-item" href="#">Drop down 1</a></li>
                <li>
                  <div class="btn-group dropend">
                    <a class=" dropdown-toggle dropdown-item" data-bs-toggle="dropdown" aria-expanded="false">
                      Deep Drop Down
                    </a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Action</a></li>
                      <li><a class="dropdown-item" href="#">Action two</a></li>
                      <li><a class="dropdown-item" href="#">Action three</a></li>
                    </ul>
                  </div>
                  </a>
                </li>
                <li><a class="dropdown-item" href="#">Drop down 2</a></li>
                <li><a class="dropdown-item" href="#">Drop down 3</a></li>
                <li><a class="dropdown-item" href="#">Drop down 4</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link active text-light" aria-current="page" href="#contact">Contact</a>
            </li>
            <li class="nav-item " style="width: 150px;text-align: center;">
              <a class=" getstart nav-link active border border-2 border-info text-light rounded-pill "
                aria-current="page" href="#">Get Started</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="d-flex d-sm-flex flex-lg-row flex-md-column flex-sm-column  px-lg-5 px-sm-0" id="home">
      <div class=" mt-10 ms-lg-5 align-self-center  order-lg-1 order-md-2 order-sm-2   home-heading" >
        <h1 class="text-light fw-bold "> Better Solutions For Your Business </h1>
        <p class=" fw-lg-bold fw-md-bold mb-5" style="color: rgb(192, 189, 189); ">
          We are team of talented designers making websites with Bootstrap
        </p>

        <a class="border border-2 border-info text-light rounded-pill bg-info px-3 py-2 text-decoration-none fw-lg-semibold fw-lg-semibold border-outline-info"
          style="margin-bottom: 10px; letter-spacing: 1px;" aria-current="page" href="#">Get Started</a>
        <span class="watchnow "><i class="bi-play-circle"></i>
          <a class="text-light p-2 text-decoration-none fs-5 align-self-center">Watch Video</a></span>
      </div>
      <div class="order-sm-1 order-md-1 order-lg-2 align-self-center">
        <img src="./image/arsha/hero-img.png"  class="ai-image" />
      </div>
    </div>
    <div style="background-color: #e6e4e4; padding:0px 0px">
      <div class=" row g-0">
        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
          <img src="./image/arsha/clients/client-1.png" class="imgpng">
        </div>
        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
          <img src="./image/arsha/clients/client-2.png" class="imgpng">
        </div>
        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
          <img src="./image/arsha/clients/client-3.png" class="imgpng">
        </div>
        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
          <img src="./image/arsha/clients/client-4.png" class="imgpng">
        </div>
        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
          <img src="./image/arsha/clients/client-5.png" class="imgpng">
        </div>
        <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
          <img src="./image/arsha/clients/client-6.png" class="imgpng">
        </div>
      </div>
    </div>
    <div class="bg-light pb-5 py-4" id="about">
      <div class="text-center py-3">
        <h2 class="fs-2 fw-bold mb-4 pb-4 h2h position-relative">ABOUT US</h2>
      </div>
      <div class="row g-0 px-lg-5 text-dark justify-content-around">
        <div class="col-lg-6 px-4">
          <p class="mt-0 " style="color:#444444 ; font-family: Open Sans, sans-serif;font-size: 17px;
          ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua.</p>
          <ul class="ultick">
            <li>
              <span class="ri">
                <iconify-icon icon="ri:check-double-line"></iconify-icon>
              </span>
              Ullamco laboris nisi ut aliquip ex ea commodo consequat</li>
            <li>
              <span class="ri">
                <iconify-icon icon="ri:check-double-line"></iconify-icon>
              </span>
              Duis aute irure dolor in reprehenderit in voluptate velit</li>
            <li>
              <span class="ri">
                <iconify-icon icon="ri:check-double-line"></iconify-icon>
              </span>Ullamco laboris nisi ut aliquip ex ea commodo consequat</li>
          </ul>
        </div>
        <div class="col-lg-6 pt-4 pt-lg-0 px-4">
          <p style="color:#444444 ; font-family: Open Sans, sans-serif;font-size: 17px;
        ">Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.</p>
          <button class="learnmore rounded-2 p-2">Learn More</button>
        </div>
      </div>
    </div>
    <div style="background-color: #f3f3f6;" class="px-lg-5 py-5">
      <div class="row g-0 ">
        <div class="col-lg-7 d-flex flex-column justify-content-center align-items-stretch order-2 order-lg-1 px-3">
          <div style="color: #37517e;">
            <h2>
              Eum ipsam laborum deleniti<strong> velit pariatur architecto aut nihil</strong>
            </h2>
            <p style="color: #8f8d8d;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit</p>
          </div>
          <div class="accordion" id="accordionExample">
            <div class="accordion-item my-3 border-0 shadow-sm rounded-2">
              <h2 class="accordion-header " id="headingOne">
                <button class="accordion-button fw-semibold" style="font-family: Open Sans, sans-serif;
              color: #444444;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                  aria-expanded="true" aria-controls="collapseOne">
                  <span class="me-2 fw-semibold fs-6 text-info">01</span> Non consectetur a erat nam at lectus urna
                  duis?
                </button>
              </h2>
              <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                data-bs-parent="#accordionExample">
                <div class="accordion-body" style="font-family: Open Sans, sans-serif;
              color: #444444;">
                  Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur
                  gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
                </div>
              </div>
            </div>
            <div class="accordion-item my-3 border-0 shadow-sm rounded-2">
              <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed fw-semibold" style="font-family: Open Sans, sans-serif;
              color: #444444;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                  aria-expanded="false" aria-controls="collapseTwo">
                  <span class="me-2 fw-semibold fs-6 text-info">02</span> Feugiat scelerisque varius morbi enim nunc?
                </button>
                </button>
              </h2>
              <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                data-bs-parent="#accordionExample">
                <div class="accordion-body" style="font-family: Open Sans, sans-serif;
              color: #444444;">
                  Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id
                  donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit
                  ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui.
                </div>
              </div>
            </div>
            <div class="accordion-item my-3 border-0 shadow-sm rounded-2">
              <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed fw-semibold" style="font-family: Open Sans, sans-serif;
              color: #444444;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
                  aria-expanded="false" aria-controls="collapseThree">
                  <span class="me-2 fw-semibold fs-6 text-info">03</span> Dolor sit amet consectetur adipiscing elit?
                </button>
              </h2>
              <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                data-bs-parent="#accordionExample">
                <div class="accordion-body" style="font-family: Open Sans, sans-serif;
              color: #444444;">
                  Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum
                  integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt.
                  Lectus urna duis convallis convallis tellus. Urna molestie at elementum eu facilisis sed odio morbi
                  quis
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-5 order-1 order-lg-2 py-2" style="text-align: center;">
          <img src="./image/arsha/why-us.png" class="ai-image "/>
        </div>
      </div>
    </div>
    <div class="px-lg-5 py-5 bg-white ">
      <div class="row g-0 px-lg-5">
        <div class="col-lg-6 align-self-center py-2"  style="text-align: center;">
          <img src="./image/arsha/skills.png"  class="ai-image">
        </div>
        <div class="col-lg-6 pt-4 pt-lg-0 px-3">
          <div style="color: #37517e;">
            <h2>
              <strong>Voluptatem dignissimos provident quasi corporis voluptatesl</strong>
            </h2>
            <p style="color: #8f8d8d;"><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. </i></p>
            <div>
              <span class="p-0 mb-2 d-block fw-semibold "
                style="color:#4668a2; font-family: Poppins, sans-serif; font-size: 12px;">
                HTML
                <i class="float-end">100%</i>
              </span>
              <div class="progress rounded-0 mb-4" style="height: 10px; ">
                <div class="progress-bar" role="progressbar" aria-label="Basic example"
                  style="width: 100%; background-color: #4668a2;" aria-valuenow="100" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
              <span class="p-0 mb-2  fw-semibold"
                style="color:#4668a2; font-family: Poppins, sans-serif; font-size: 12px;">
                CSS
                <i class="float-end">90%</i>
              </span>
              <div class="progress rounded-0 mb-4" style="height: 10px; ">
                <div class="progress-bar" role="progressbar" aria-label="Basic example"
                  style="width: 90%; background-color: #4668a2;" aria-valuenow="90" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
              <span class="p-0 mb-2 d-block fw-semibold"
                style="color:#4668a2; font-family: Poppins, sans-serif; font-size: 12px;">
                JAVASCRIPT
                <i class="float-end">50%</i>
              </span>
              <div class="progress rounded-0 mb-4" style="height: 10px; ">
                <div class="progress-bar" role="progressbar" aria-label="Basic example"
                  style="width: 75%; background-color: #4668a2;" aria-valuenow="75" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
              <span class="p-0 mb-2 d-block fw-semibold"
                style="color:#4668a2; font-family: Poppins, sans-serif; font-size: 12px;">
                PHOTOSHOP
                <i class="float-end">55%</i>
              </span>
              <div class="progress rounded-0 mb-4" style="height: 10px; ">
                <div class="progress-bar" role="progressbar" aria-label="Basic example"
                  style="width: 55%; background-color: #4668a2;" aria-valuenow="55" aria-valuemin="0"
                  aria-valuemax="100"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="background-color: #f3f3f6;" class="py-5 " id="service">
      <div class="text-center py-4">
        <h2 class="fs-2 fw-bold mb-4 pb-4 h2h position-relative">SERVICES</h2>
        <p class="px-lg-10 mx-lg-5 para " >Magnam
          dolores commodi suscipit. Necessitatibus
          eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et
          nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
      </div>
      <div class="row g-0  justify-content-around px-2 py-2">
        <div class="col-lg-3 col-md-6 shadow mb-md-3 mb-sm-3 serviceb bg-white m-2 p-2" style="width: 300px">
          <div class=" p-4 ">
            <div>
              <i class="fa fa-dribbble ico" style="font-size: 28px; font-weight: 600;"></i>
            </div>
            <h4 style="color: #4668a2;" class="py-3">Lorem Ipsum</h4>
            <p style="color: #444444; line-height: 24px; font-size: 15px;">Voluptatum deleniti atque corrupti quos
              dolores et quas molestias excepturi</p>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 shadow mb-md-3 mb-sm-3 serviceb bg-white m-2 p-2"  style="width: 300px">
          <div class=" p-4">
            <div>
              <i class="fa fa-file-text-o ico"  style="font-size: 28px; font-weight: 600;"></i>
            </div>
            <h4 style="color: #4668a2;" class="py-3">Sed ut perspici</h4>
            <p style="color: #444444; line-height: 24px; font-size: 15px;">Duis aute irure dolor in reprehenderit in
              voluptate velit esse cillum dolore</p>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 shadow mb-md-3 mb-sm-3 serviceb bg-white m-2  p-2"  style="width: 300px">
          <div class=" p-4 ">
            <div>
              <i class="fa fa-tachometer ico"  style="font-size: 28px; font-weight: 600;"></i>
            </div>
            <h4 style="color: #4668a2;" class="py-3">Magni Dolores</h4>
            <p style="color: #444444; line-height: 24px; font-size: 15px;">Excepteur sint occaecat cupidatat non
              proident, sunt in culpa qui officia</p>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 shadow mb-md-3 mb-sm-3 serviceb bg-white m-2 p-2"  style="width: 300px">
          <div class=" p-4">
            <div>
              <i class="fa fa-file-text-o ico"  style="font-size: 28px; font-weight: 600;"></i>
            </div>
            <h4 style="color: #4668a2;" class="py-3">Nemo Enim</h4>
            <p style="color: #444444; line-height: 24px; font-size: 15px;">At vero eos et accusamus et iusto odio
              dignissimos ducimus qui blanditiis</p>
          </div>
        </div>
      </div>
    </div>
    <div class="imgblue">
      <div class="blueimg">
        <div class="row g-0 py-5" >
          <div class="col-lg-9 py-5 px-4" >
            <h3>Call To Action</h3>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
              laborum.</p>
          </div>
          <div class="col-lg-3 align-self-center ps-4">
            <a class=" getstart active border border-2 border-white text-light rounded-pill py-3 px-4 text-decoration-none border-outline-none fw-bold"
              href="#">Call To Action</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white" id="portfolio">
      <div class="text-center py-5">
        <h2 class="fs-2 fw-bold mb-4 pb-4 h2h position-relative">PORTFOLIO</h2>
        <p class="px-lg-5 mx-lg-5 para">Magnam
          dolores commodi suscipit. Necessitatibus
          eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et
          nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
      </div>
      <ul class="d-flex justify-content-center py-2" id="portfolio-ul">
        <li class="px-3 py-2 mx-1">All</li>
        <li class="px-3 py-2 mx-1">App</li>
        <li class="px-3 py-2 mx-1">Card</li>
        <li class="px-3 py-2 mx-1">Web</li>
      </ul>
      <div class="row g-0  portfolio px-lg-5 mx-lg-5 " style="height: 100%;">
        <div class="col-sm-6 col-lg-4 col-md-6 mb-4">
          <div class="portfo">
            <img src="./image/arsha/portfolio/portfolio-1.jpg"  class="grp-image ">
            <div class="inner-div">
              <div>
                <h4>App</h4>
                <p class="d-inline">App</p>
                <i class="fa fa-link float-end px-3" style="color: white;"></i> 
                <i class="fa fa-plus float-end px-3" style="color: white;"></i>
              </div>
            </div>
          </div>
          <div class="portfo"><img src="./image/arsha/portfolio/portfolio-6.jpg"   class="grp-image">
            <div class="inner-div">
              <div>
                <h4>App 3</h4>
                <p class="d-inline">App</p>
                <i class="fa fa-link float-end px-3" style="color: white;"></i> 
                <i class="fa fa-plus float-end px-3" style="color: white;"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 col-md-6  mb-4 ">
          <div class="portfo">
            <img src="./image/arsha/portfolio/portfolio-2.jpg"  class="grp-image">
             <div class="inner-div">
              <div>
                <h4>Web 3</h4>
                <p class="d-inline">Web</p>
                <i class="fa fa-link float-end px-3" style="color: white;"></i> 
                <i class="fa fa-plus float-end px-3" style="color: white;"></i>
              </div>
            </div>
          </div>
          <div class="portfo"><img src="./image/arsha/portfolio/portfolio-5.jpg"   class="grp-image">
            <div class="inner-div">
              <div>
                <h4>Web 2</h4>
                <p class="d-inline">Web</p>
                <i class="fa fa-link float-end px-3" style="color: white;"></i> 
                <i class="fa fa-plus float-end px-3" style="color: white;"></i>
              </div>
            </div>
          </div>
          <div class="portfo"><img src="./image/arsha/portfolio/portfolio-9.jpg"   class="grp-image">
            <div class="inner-div">
              <div>
                <h4>Web 3</h4>
                <p class="d-inline">Web</p>
                <i class="fa fa-link float-end px-3" style="color: white;"></i> 
                <i class="fa fa-plus float-end px-3" style="color: white;"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 col-md-6  mb-4 ">
          <div class="portfo"><img src="./image/arsha/portfolio/portfolio-3.jpg"  class="grp-image">
            <div class="inner-div">
              <div>
                <h4>App 2</h4>
                <p class="d-inline">App</p>
                <i class="fa fa-link float-end px-3" style="color: white;"></i> 
                <i class="fa fa-plus float-end px-3" style="color: white;"></i>
              </div>
            </div>
          </div>
          <div class="portfo"><img src="./image/arsha/portfolio/portfolio-4.jpg"   class="grp-image">
            <div class="inner-div">
              <div>
                <h4>Card 1</h4>
                <p class="d-inline">Card</p>
                <i class="fa fa-link float-end px-3" style="color: white;"></i> 
                <i class="fa fa-plus float-end px-3" style="color: white;"></i>
              </div>
            </div>
          </div>
          <div class="portfo"><img src="./image/arsha/portfolio/portfolio-7.jpg"   class="grp-image">
            <div class="inner-div">
              <div>
                <h4>Card 2</h4>
                <p class="d-inline">Card</p>
                <i class="fa fa-link float-end px-3" style="color: white;"></i> 
                <i class="fa fa-plus float-end px-3" style="color: white;"></i>
              </div>
            </div>
          </div>
          <div class="portfo"><img src="./image/arsha/portfolio/portfolio-8.jpg"   class="grp-image">
            <div class="inner-div">
              <div>
                <h4>Card 3</h4>
                <p class="d-inline">Card</p>
                <i class="fa fa-link float-end px-3" style="color: white;"></i> 
                <i class="fa fa-plus float-end px-3" style="color: white;"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="background-color: #f3f3f6;" class="py-5" id="team">
      <div class="text-center py-5">
        <h2 class="fs-2 fw-bold mb-4 pb-4 h2h position-relative">TEAM</h2>
        <p  class="px-lg-5 mx-lg-5 para">Magnam
          dolores commodi suscipit. Necessitatibus
          eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et
          nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
      </div>
      <div class="d-flex justify-content-evenly flex-wrap">
        <div class=" shadow mb-md-3 mb-sm-3 serviceb bg-white p-4 rounded-2 ">
          <div class="d-flex align-items-start ">
            <div>
              <img src="./image/arsha/team/team-1.jpg" class="card-image">
            </div>
            <div class="ps-4 card-info" >
              <h4 style="color: #37517e;">Walter White</h4>
              <span class="text-dark">Chief Executive Officer</span>
              <hr style="width: 80px; color: #37517e;">
              <p class="text-dark">Explicabo voluptatem mollitia et repellat qui dolorum quasi</p>
              <div class="d-flex socio">
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-twitter"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-facebook"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-instagram"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-linkedin"></i></a>
              </div>
            </div>
          </div>
        </div>
        <div class=" shadow mb-md-3 mb-sm-3 serviceb bg-white p-4 rounded-2 " >
          <div class="d-flex align-items-start ">
            <div>
              <img src="./image/arsha/team/team-2.jpg" class="card-image">
            </div>
            <div class="ps-4 card-info">
              <h4 style="color: #37517e;">Sarah Jhonson</h4>
              <span class="text-dark">Product Manager</span>
              <hr style="width: 80px; color: #37517e;">
              <p class="text-dark">Aut maiores voluptates amet et quis praesentium qui senda para</p>
              <div class="d-flex socio">
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-twitter"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-facebook"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-instagram"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-linkedin"></i></a>
              </div>
            </div>
          </div>
        </div>
        <div class=" shadow mb-md-3 mb-sm-3 serviceb bg-white p-4 rounded-2 ">
          <div class="d-flex align-items-start ">
            <div>
              <img src="./image/arsha/team/team-3.jpg" class="card-image">
            </div>
            <div class="ps-4 card-info">
              <h4 style="color: #37517e;">William Anderson</h4>
              <span class="text-dark">CTO</span>
              <hr style="width: 80px; color: #37517e;">
              <p class="text-dark">Quisquam facilis cum velit laborum corrupti fuga rerum quia</p>
              <div class="d-flex socio">
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-twitter"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-facebook"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-instagram"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-linkedin"></i></a>
              </div>
            </div>
          </div>
        </div>
        <div class=" shadow mb-md-3 mb-sm-3 serviceb bg-white p-4 rounded-2  " >
          <div class="d-flex align-items-start ">
            <div>
              <img src="./image/arsha/team/team-4.jpg" class="card-image">
            </div>
            <div class="ps-4 card-info" >
              <h4 style="color: #37517e;">Amanda Jepson</h4>
              <span class="text-dark">Accountant</span>
              <hr style="width: 80px; color: #37517e;">
              <p class="text-dark">Dolorum tempora officiis odit laborum officiis et et accusamus</p>
              <div class="d-flex socio">
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-twitter"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-facebook"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-instagram"></i></a>
                <a class="rounded-circle p-1 m-1 text-center"
                  style="color: #37517e;background-color: #f3f3f6;width: 32px;height: 32px; "><i
                    class="fa fa-linkedin"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="py-5 bg-white">
      <div class="text-center py-5">
        <h2 class="fs-2 fw-bold mb-4 pb-4 h2h position-relative">PRICING</h2>
        <p class="px-lg-5 mx-lg-5 para">Magnam
          dolores commodi suscipit. Necessitatibus
          eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et
          nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
      </div>
      <div class="d-flex justify-content-evenly flex-wrap py-3 px-lg-5">
        <div class="rounded-2 shadow mb-md-3 mb-sm-3 mx-lg-3 bg-white pricing-conatiner" >
          <div style="padding: 80px 0; font-weight: lighter;">
            <h3 style="color: #37517e;"> Free Plan</h3>
            <h4 style="color: #37517e;" class="fs-1">
              <sup>$</sup>
              0
              <span class="text-info d-block" style="font-size: 16px;">per month</span>
            </h4>
            <ul class="checkk py-5">
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-check text-success"></i>
                Quam adipiscing vitae proin
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-check text-success"></i>
                Nec feugiat nisl pretium
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-check text-success"></i>
                Nec feugiat nisl pretium
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-close " style="color:#ccc ;"></i>
                <span class="lt">Pharetra massa massa ultricies</span>
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-close " style="color:#ccc ;"></i>
                <span class="lt">Massa ultricies mi quis hendrerit</span>
              </li>
            </ul>
            <a class="border border-1 border-info rounded-pill gtst px-4 py-2 text-decoration-none "
              style="margin-bottom: 10px; letter-spacing: 1px;" href="#">Get Started</a>
          </div>
        </div>
        <div
          class=" rounded-2 shadow mb-md-3 mb-sm-3 mx-lg-3 bg-white border-info border-5 border-top border-bottom pricing-conatiner"
          >
          <div style="padding: 80px 0;">
            <h3 style="color: #37517e;"> Business Plan</h3>
            <h4 style="color: #37517e;" class="fs-1">
              <sup>$</sup>
              29
              <span class="text-info d-block" style="font-size: 16px;">per month</span>
            </h4>
            <ul class="checkk py-5">
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-check text-success"></i>
                Quam adipiscing vitae proin
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-check text-success"></i>
                Nec feugiat nisl pretium
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-check text-success"></i>
                Nec feugiat nisl pretium
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-close " style="color:#ccc ;"></i>
                <span class="lt">Pharetra massa massa ultricies</span>
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-close " style="color:#ccc ;"></i>
                <span class="lt">Massa ultricies mi quis hendrerit</span>
              </li>
            </ul>
            <a class="border border-1 border-info rounded-pill bg-info text-white px-4 py-2 text-decoration-none "
              style="margin-bottom: 10px; letter-spacing: 1px;" href="#">Get Started</a>
          </div>
        </div>
        <div class=" rounded-2 shadow mb-md-3 mb-sm-3 mx-lg-3 bg-white pricing-conatiner" >
          <div style="padding: 80px 0;">
            <h3 style="color: #37517e;"> Developer Plan</h3>
            <h4 style="color: #37517e;" class="fs-1">
              <sup>$</sup>
              49
              <span class="text-info d-block" style="font-size: 16px;">per month</span>
            </h4>
            <ul class="checkk py-5">
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-check text-success"></i>
                Quam adipiscing vitae proin
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-check text-success"></i>
                Nec feugiat nisl pretium
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-check text-success"></i>
                Nec feugiat nisl pretium
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-close " style="color:#ccc ;"></i>
                <span class="lt">Pharetra massa massa ultricies</span>
              </li>
              <li style="font-size: 16px; color:#cdcbcb; padding: 5px;">
                <i class="fa fa-close " style="color:#ccc ;"></i>
                <span class="lt">Massa ultricies mi quis hendrerit</span>
              </li>
            </ul>
            <a class="border border-1 border-info rounded-pill gtst px-4 py-2 text-decoration-none "
              style="margin-bottom: 10px; letter-spacing: 1px;" href="#">Get Started</a>
          </div>
        </div>
      </div>

    </div>
    <div style="background-color: #f3f3f6;" class="d-flex flex-column">
      <div class="text-center py-5">
        <h2 class="fs-2 fw-bold mb-4 pb-4 h2h position-relative">FREQUENTLY ASKED QUESTIONS</h2>
        <p  class="px-lg-5 mx-lg-5 para">Magnam
          dolores commodi suscipit. Necessitatibus
          eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et
          nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
      </div>
      <div class="accordion faq-container" id="accordionExample" >
        <div class="accordion-item my-3 border-0 shadow-sm rounded-2">
          <h2 class="accordion-header " id="headingOne">
            <button class="accordion-button fw-semibold" style="font-family: Open Sans, sans-serif;
          color: #37517e;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
              aria-controls="collapseOne">
              <span class="me-2 fw-semibold fs-5 text-info"><i class="fa fa-question-circle"></i></span>
               Non consectetur
              a erat nam at lectus urna
              duis?
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
            data-bs-parent="#accordionExample">
            <div class="accordion-body" style="font-family: Open Sans, sans-serif;
          color: #444444;">
              Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur
              gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
            </div>
          </div>
        </div>
        <div class="accordion-item my-3 border-0 shadow-sm rounded-2">
          <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed fw-semibold" style="font-family: Open Sans, sans-serif;line-height: 2;
          color: #37517e;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
              aria-controls="collapseTwo">
              <span class="me-2 fw-semibold fs-5 text-info"><i class="fa fa-question-circle"></i></span> Feugiat
              scelerisque varius morbi enim nunc?
            </button>
            </button>
          </h2>
          <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
            data-bs-parent="#accordionExample">
            <div class="accordion-body" style="font-family: Open Sans, sans-serif;
          color: #444444;">
              Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id
              donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit
              ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui.
            </div>
          </div>
        </div>
        <div class="accordion-item my-3 border-0 shadow-sm rounded-2">
          <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed fw-semibold" style="font-family: Open Sans, sans-serif;
          color: #37517e;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
              aria-expanded="false" aria-controls="collapseThree">
              <span class="me-2 fw-semibold fs-5 text-info"><i class="fa fa-question-circle"></i></span> Dolor sit amet
              consectetur adipiscing elit?
            </button>
          </h2>
          <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
            data-bs-parent="#accordionExample">
            <div class="accordion-body" style="font-family: Open Sans, sans-serif;
          color: #444444;">
              Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum
              integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt.
              Lectus urna duis convallis convallis tellus. Urna molestie at elementum eu facilisis sed odio morbi
              quis
            </div>
          </div>
        </div>
        <div class="accordion-item my-3 border-0 shadow-sm rounded-2">
          <h2 class="accordion-header" id="headingFour">
            <button class="accordion-button collapsed fw-semibold" style="font-family: Open Sans, sans-serif;
          color: #37517e;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false"
              aria-controls="collapseFour">
              <span class="me-2 fw-semibold fs-5 text-info"><i class="fa fa-question-circle"></i></span> Tempus quam
              pellentesque nec nam aliquam sem et tortor consequat?
            </button>
          </h2>
          <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
            data-bs-parent="#accordionExample">
            <div class="accordion-body" style="font-family: Open Sans, sans-serif;
          color: #444444;">
              Molestie a iaculis at erat pellentesque adipiscing commodo. Dignissim suspendisse in est ante in. Nunc vel
              risus commodo viverra maecenas accumsan. Sit amet nisl suscipit adipiscing bibendum est. Purus gravida
              quis blandit turpis cursus in.
            </div>
          </div>
        </div>
        <div class="accordion-item my-3 border-0 shadow-sm rounded-2">
          <h2 class="accordion-header" id="headingFive">
            <button class="accordion-button collapsed fw-semibold" style="font-family: Open Sans, sans-serif;
          color: #37517e;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false"
              aria-controls="collapseFive">
              <span class="me-2 fw-semibold fs-5 text-info"><i class="fa fa-question-circle"></i></span> Tortor vitae
              purus faucibus ornare. Varius vel pharetra vel turpis nunc eget lorem dolor?
            </button>
          </h2>
          <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
            data-bs-parent="#accordionExample">
            <div class="accordion-body" style="font-family: Open Sans, sans-serif;
          color: #444444;">
              Laoreet sit amet cursus sit amet dictum sit amet justo. Mauris vitae ultricies leo integer malesuada nunc
              vel. Tincidunt eget nullam non nisi est sit amet. Turpis nunc eget lorem dolor sed. Ut venenatis tellus in
              metus vulputate eu scelerisque.
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white" id="contact">
      <div class="text-center py-5">
        <h2 class="fs-2 fw-bold mb-4 pb-4 h2h position-relative">CONTACT</h2>
        <p class="px-lg-5 mx-lg-5 para">Magnam
          dolores commodi suscipit. Necessitatibus
          eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et
          nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
      </div>
      <div class="d-flex justify-content-evenly flex-wrap cont ">
        <div
          class=" shadow mb-md-3 mb-sm-3 mx-lg-3 bg-white border-info border-3 border-top border-bottom p-4 m-2"
          >
          <div class="d-flex">
            <div class="rounded-circle p-1 ms-lg-4 ms-md-4 mb-5 text-center align-self-center icohover fs-4" 
              style="width: 42px;height: 42px; "><i class="fa fa-map-marker"></i></div>
            <div class="ms-4  ">
              <h4 class="fw-semibold mb-2">Location:</h4>
              <p>A108 Adam Street, New York, NY 535022</p>
            </div>
          </div>
          <div class="d-flex">
            <div class="rounded-circle p-1 ms-lg-4 ms-md-4  mb-5 text-center align-self-center  fs-5 icohover"
              style="width: 42px;height: 42px; "><i class="fa fa-envelope"></i></div>
            <div class="ms-4">
              <h4 class="fw-semibold mb-2">Email:</h4>
              <p>info@example.com</p>
            </div>
          </div>
          <div class="d-flex">
            <div class="rounded-circle p-1ms-lg-4 ms-md-4  mb-5 text-center align-self-center fs-4 icohover"
              style="width: 42px;height: 42px; "><i class="fa fa-phone"></i></div>
            <div class="ms-4">
              <h4 class="fw-semibold mb-2">Call:</h4>
              <p>+1 5589 55488 55s</p>
            </div>
          </div>
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12097.433213460943!2d-74.0062269!3d40.7101282!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb89d1fe6bc499443!2sDowntown+Conference+Center!5e0!3m2!1smk!2sbg!4v1539943755621"
            frameborder="0" style="border:0; width: 100%; height: 290px;" allowfullscreen=""></iframe>
        </div>
        <div
          class=" shadow mb-md-3 mb-sm-3 mx-lg-3 bg-white border-info border-3 border-top border-bottom m-2"
          style="width: 750px;">
          <div class="row g-0">
            <div class="col-md-6 col-lg-6 px-4 py-4">
              <label class="d-block pb-2" style="font-family: Open Sans, sans-serif; color: #575757;"> Your Name</label>
              <input type="text" class="inp">
            </div>
            <div class="col-md-6 col-lg-6 px-4 py-4">
              <label class="d-block pb-2" style="font-family: Open Sans, sans-serif; color: #575757;"> Your
                Email</label>
              <input type="text" class="inp">
            </div>
          </div>
          <div class="px-4 py-3">
            <label class="d-block pb-2" style="font-family: Open Sans, sans-serif; color: #575757;"> Subject</label>
            <input type="text" class="inp">
          </div>
          <div class="px-4 py-3">
            <label class="d-block pb-2" style="font-family: Open Sans, sans-serif; color: #575757;"> Message</label>
            <textarea type="text" class="inp" style="height: 200px;"></textarea>
          </div>
          <div class="text-center p-3">
            <a class="border border-1 border-info rounded-pill bg-info text-white px-4 py-2 text-decoration-none "
              style="margin-bottom: 10px; letter-spacing: 1px;" href="#">Get Started</a>
          </div>
        </div>
      </div>
      <div style="background-color: #f3f3f6;">
        <div class="text-center py-5">
          <h2 class="fs-3 pb-3 " style="color: #37517e;">Join Our Newsletter</h2>
          <p style="color: #696767; font-size: 17px; font-family: 'Open Sans', sans-serif;" class="px-lg-5 mx-lg-5">Tamen quem
            nulla quae legam multos aute sint culpa legam noster magna</p>
          <div>
            <input type="email" class="inp1 shadow p-2" >
            <a class="border border-1 border-info rounded-pill bg-info text-white px-4 py-2 text-decoration-none ml shadow"
              style="margin-bottom: 10px; letter-spacing: 1px;" href="#">Subscribe</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-white" style="padding: 50px 10px;">
      <div class="row g-0">
        <div class="col-lg-3 col-md-6 text-secondary">
          <h3 style="color: #37517e;" class="fw-semibold">ARSHA</h3>
          <p style="font-family: 'open sans' san-serif;">
            A108 Adam Street<br>
            New York, NY 535022<br>
            United States<br><br>
            <strong>Phone :</strong> +1 5589 55488 55<br>
            <strong>Email :</strong> info@example.com
          </p>
        </div>
        <div class="col-lg-3 col-md-6">
          <h4 style="color: #37517e; font-size: 18px;">Useful links</h4>
          <ul class="footerul">
            <li>Home</li>
            <li>About us</li>
            <li>Services</li>
            <li>Terms of service</li>
            <li>Private policy</li>
          </ul>
        </div>
        <div class="col-lg-3 col-md-6">
          <h4 style="color: #37517e; font-size: 18px;">Our Services</h4>
          <ul class="footerul">
            <li>Web Design</li>
            <li>Web Development</li>
            <li>Product Management</li>
            <li>Marketing</li>
            <li>Graphic Design</li>
          </ul>
        </div>
        <div class="col-lg-3 col-md-6">
          <h4 style="color: #37517e; font-size: 18px;">Our Social Networks</h4>
          <p style="color: #696767; font-size: 17px; font-family: 'Open Sans', sans-serif;">Cras fermentum odio eu
            feugiat lide par naso tierra videa magna derita valies</p>
          <div class="d-flex socio">
            <a class="rounded-circle p-1 m-1 text-center"
              style="color: #fff;background-color: #47b2e4;width: 32px;height: 32px; "><i class="fa fa-twitter"></i></a>
            <a class="rounded-circle p-1 m-1 text-center"
              style="color: #fff;background-color: #47b2e4;width: 32px;height: 32px; "><i
                class="fa fa-facebook"></i></a>
            <a class="rounded-circle p-1 m-1 text-center"
              style="color: #fff;background-color: #47b2e4;width: 32px;height: 32px; "><i
                class="fa fa-instagram"></i></a>
            <a class="rounded-circle p-1 m-1 text-center"
              style="color: #fff;background-color: #47b2e4;width: 32px;height: 32px; "><i class="fa fa-skype"></i></a>
            <a class="rounded-circle p-1 m-1 text-center"
              style="color: #fff;background-color: #47b2e4;width: 32px;height: 32px; "><i
                class="fa fa-linkedin"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div
      class="foot">
      <p>© Copyright <b>Arsha</b>. All Rights Reserved
        <span class="float-lg-end">Designed by <span style="color: #47b2e4;">BootstrapMade</span></span>
      </p>
    </div>
  </div>
</body>
</html>