<div id="loader"></div>
  <div class="position-fixed w-100 d-flex justify-content-end p-3 mt-md-0 mt-5">
    <a class="position-fixed h2 float-right hoverr" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"
      aria-controls="offcanvasExample">
      <i class="fas fa-cog"></i>
    </a>
  </div>

  <div style="height: 250px;" class="offcanvas offcanvas-end bg-dark rounded-3 mt-5" tabindex="-1" id="offcanvasExample"
    aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header text-white">
      <button type="button" class="btn-close text-reset bg-white" data-bs-dismiss="offcanvas"
        aria-label="Close"></button>
    </div>

    <div class="offcanvas-body d-flex flex-column">
      <label class="text-white">Choose a Color:</label>
      <input class="jscolor" value="C0BEBF" onchange="updateColor(this.value)" id="color-picker"
        style="height: 30px; border: 2px solid #fff; margin-bottom: 20px; color: #28282B	;" />


    </div>




  </div>

  <div class="nav-2 w-100 d-md-none">


    <nav class="rounded-bottom  p-2 navbar navbar-expand-lg navbar-dark text-start rounded-bottom bg-custom-color">

      <div class="container-fluid p-0 ">
        <div class="bg-custom-color p-md-4 rounded-start m-0">
          <a class="navbar-brand logo" href="#home" style="color: #28282B	; "><b>Pooja Sharma</b></a>
        </div>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa-solid fa-bars " style="color: #28282B	;"></i></b>

        </button>

        <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link" aria-current="page" href="#home" style="color: #28282B	;"><b>Home</b></a>
            <a class="nav-link" href="#about" style="color: #28282B	;"><b>About</b></a>
            <a class="nav-link" href="#skills" style="color: #28282B	;"><b>Skills</b></a>
            <a class="nav-link" href="#portfolio" style="color: #28282B	;"><b>Portfolio</b></a>
          </div>
        </div>
      </div>
      <div class="bg-custom-color p-4 px-5 m-0 rounded-end d-none d-md-block">
        <b>
          <a href="#" class="navbar-change-btn2">
            <i class="fa-solid fa-bars text-dark"></i></b>
        </a>
      </div>
    </nav>
  </div>
  <div id="main-home" class="d-md-flex">
    <div id="home" class="row vh-100 w-100 p-0 m-0 align-items-center">

      <div
        class="nav h-100 d-flex justify-content-center align-items-center col-12 col-md-1 col-sm-1 col-xl-1 col-lg-1">
        <div
          class="col-12 col-md-1 col-sm-1 col-xl-1 col-lg-1 h3  text-white position-fixed navbarr rounded-top d-none d-md-block bg-dark"
          style="background-color:rgb(0, 0, 0,0.6);">
          <div class="w-100  m-0 p-4 bg-custom-color text-dark rounded-top text-center">
            <b>
              <a class=" logo text-decoration-none" style="color: #28282B	; font-size: 25px;">PS</a>
            </b>
          </div>
          <div
            class="text-center py-3 d-md-flex flex-md-column align-items-center justify-content-center border-0 border-end">
            <a title="Home" class="me-3 me-md-0"> <i class="mb-3  fa-solid fa-house text-white"></i></a>
            <a title="About" class="btnn me-3 me-md-0 about-toggle " onclick="aboutSlide()"> <i
                class="mb-3 fa-solid fa-user text-white"></i>
            </a>
            <a title="Skills" class="skillsbtn me-3 me-md-0" onclick="SkillsSlide()"> <i
                class="mb-3 fas fa-pencil-ruler text-white"></i>
            </a>

            <a title="Portfolio" class=" me-3 me-md-0" onclick="portfolioSlide()"> <i
                class="mb-3 fas fa-file text-white"></i>
            </a>

            <a title="Contact" class="contactbtn me-3 me-md-0" onclick="contactSlide()"> <i
                class="mb-3 fa-solid fa-phone text-white"></i>
            </a>
          </div>
          <div class="w-100  m-0 p-4 bg-custom-color text-center rounded-bottom">
            <b>
              <a href="#" class="navbar-change-btn">
                <i class="fa-solid fa-bars text-dark"></i></b>
            </a>
          </div>
        </div>
      </div>

      <div
        class="home-content d-flex flex-column justify-content-center text-start text-white px-5 py-0 p-md-5  col-12 col-md-6 col-sm-6 col-xl-6 col-lg-6">
        <h2 class="m-0">HELLO, I'M</h2>
        <h1 class="display-3 p-0 m-0 pb-3 home-name"
          style="font-weight: 800;font-family:sans-serif; text-wrap: nowrap;">Pooja
          <span class="text-custom-color">Sharma</span>
        </h1>
        <div class="verticalflip">
          &nbsp;
          <span>UI/UX Designer</span>
        </div>
        <p class=" d-block d-md-none py-3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
        <p class=" d-none d-md-block mt-2 p-1 rounded home-para">Lorem ipsum dolor sit amet, consectetur adipisicing
          elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.</p>
        <p class="largepara"> 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 class="d-flex gap-3  justify-content-start w-100 px-2">

          <a href="#">
            <i class="py-2 h5 me-md-0 fa-brands fa-instagram text-white"></i>
          </a>

          <a href="#">
            <i class="py-2  h5 me-md-0 fa-brands fa-google-plus text-white"></i>
          </a>
          <a href=" #">
            <i class="py-2 h5 fa-brands fa-linkedin text-white"></i>
          </a>

        </div>
        <div class="d-flex gap-3 ">
          <div class="w-50 d-none d-md-block">
            <button class="w-100 btn btn-lg p-4 text-white neon-glow-element"
              style="border-color: #C0BEBF;text-wrap: nowrap;">Hire
              Me</button>
          </div>
          <div class="w-100 d-md-none">
            <button class="w-100 btn btn-lg p-4 text-white neon-glow-element"
              style="border-color: #C0BEBF;text-wrap: nowrap;">Hire
              Me</button>
          </div>
          <div>
            <button class="w-100 d-none d-md-inline btn btn-lg text-dark p-4 bg-custom-color"
              style="text-wrap: nowrap;">Download CV<i class="ms-3 fa-solid fa-arrow-down"></i> </button>
          </div>
        </div>
      </div>

      <div id="home-img"
        class="p-5 d-flex flex-column justify-content-center text-center col-12 col-md-4 col-sm-4 col-xl-4 col-lg-4 d-none d-md-block">
        <div class="home-img-fancy-border w-100 p-2 rounded-3  ">
          <img class="img-fluid h-100 w-100 rounded-3 rotate" src="assets/images/home_img.jpg" style="width: 300px; ">
        </div>


      </div>




      <div class="col-12 col-md-1 col-sm-1 col-xl-1 col-lg-1 d-none d-md-block">

      </div>

    </div>

    <section class="h-100 animation-section about-section bg-dark p-md-3
    " id="about">
      <button type="button" class="btn-close bg-custom-color" onclick="aboutClose()"></button>
      <div class="row py-3">
        <div class="col-12 col-md-1 col-sm-1 col-xl-1 col-lg-1  border-0 border-start ">
        </div>
        <div
          class="col-12 col-sm-5 col-xs-5 col-lg-5 col-md-5 px-md-0 px-5 about-heading d-flex flex-column justify-content-center align-items-center">
          <div class="d-flex gap-3 text-custom-color w-100">
            <span class="bg-white line mt-3"></span><span class="h5">About Me</span><span
              class="bg-white line mt-3"></span>
          </div>
          <span class="display-5 text-white fw-bolder ">Turning <span class="text-custom-color fw-bolder"> Ideas </span>
            into <span class="text-custom-color fw-bolder px-2 rounded"> Exceptional</span> Designs..
          </span>
          <br><br>
          <div class="d-flex gap-3 text-white py-3">
            <div class="d-none d-md-block border-secondary border-0 p-5 mt-2 border-2 border-top "></div>
            <div class="text-secondary about_para"><b> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                dolorem ipsum dolor sit amet, consectetur adipisicing elit, sed dolorem ipsum dolor sit amet,
                consectetur adipisicing elit, sed do
                lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</b>
            </div>
          </div>
          <div class="text-md-center py-5">
            <button class="about_btn btn btn-lg text-dark p-4 p-4 bg-custom-color">Download CV<i
                class="d-none d-md-inline ms-3 fa-solid fa-arrow-down"></i> </button>
          </div>
        </div>
        <div 
          class="col-12 col-sm-4 col-xs-4 col-lg-4 col-md-4  px-md-2 px-5  about-img-fancy-border py-3 text-center vertical-shake about_Image">
          <img
          id="about_Image"
            src="assets/images/about_img.jpg"
            class="img-fluid rounded-3 no-shake d-none">
        </div>
        <div class="col-12 col-sm-2 col-xs-2 col-lg-2 col-md-2 border-0 border-end border"></div>
      </div>
    </section>

    <section class="overflow-md-scroll h-100 w-100 skills-section animation-section bg-dark p-md-3 exp-section"
      id="skills">
      <button type="button" class="btn-close bg-custom-color" onclick="skillsClose()"></button>
      <div class="d-flex gap-3 justify-content-center text-custom-color">
        <span class="bg-white line mt-3"></span><span class="h5">Skills & Education</span><span
          class="bg-white line mt-3"></span>
      </div>
      <div class="row d-flex justify-content-around align-items-center text-white pb-2 p-5">
        <div class="col-12 col-md-1 col-sm-1 col-xl-1 col-lg-1"></div>
        <div class="col-12 col-md-5 col-sm-5 col-xl-5 col-lg-5 exp_para">
          <div class="d-flex py-1 text-white">
            <span class="h5 mb-3">Education</span>
          </div>
          <div>
            <button class="custom-border btn btn-lg p-3 text-custom-color"><span> 2018 - 2022 </span></button>
            <h1 class="py-2"><b>UI/UX Design</b></h1>
            <p>Graduated from XYZ University, specializing in interaction design and user-centered design principles.
            </p>
          </div>
          <div>
            <button class="custom-border btn btn-lg p-3 text-custom-color"><span> 2023 - Present </span></button>
            <h1 class="py-2"><b> UX Certification</b></h1>
            <p>Currently enrolled in an advanced course focusing on usability testing, accessibility, and design
              systems.</p>
          </div>
        </div>

        <div class="col-12 col-md-6 col-sm-6 col-xl-6 col-lg-6 exp_para1">
          <div class="d-flex py-1 justify-content-center gap-3 text-custom-color">
            <span class="h5">Skills</span>
          </div>
          <div>
            <div class="w-100 p-3 ps-md-5">
              <div class="bg-dark p-2 text-white rounded-top d-flex justify-content-between">
                <span>Figma</span>
                <span>95%</span>
              </div>
              <div class="containerr bg-dark">
                <div class="skills figma bg-custom-color"></div>
              </div>
            </div>
          </div>
          <div>
            <div class="w-100 p-3 ps-md-5">
              <div class="bg-dark p-2 text-white rounded-top d-flex justify-content-between">
                <span>Adobe XD</span>
                <span>90%</span>
              </div>
              <div class="containerr bg-dark">
                <div class="skills adobe-xd bg-custom-color"></div>
              </div>
            </div>
          </div>
          <div>
            <div class="w-100 p-3 ps-md-5">
              <div class="bg-dark p-2 text-white rounded-top d-flex justify-content-between">
                <span>Sketch</span>
                <span>85%</span>
              </div>
              <div class="containerr bg-dark">
                <div class="skills sketch bg-custom-color"></div>
              </div>
            </div>
          </div>
          <div>
            <div class="w-100 p-3 ps-md-5">
              <div class="bg-dark p-2 text-white rounded-top d-flex justify-content-between">
                <span>Prototyping</span>
                <span>90%</span>
              </div>
              <div class="containerr bg-dark">
                <div class="skills prototyping bg-custom-color"></div>
              </div>
            </div>
          </div>
          <div>
            <div class="w-100 p-3 ps-md-5">
              <div class="bg-dark p-2 text-white rounded-top d-flex justify-content-between">
                <span>Wireframing</span>
                <span>85%</span>
              </div>
              <div class="containerr bg-dark">
                <div class="skills wireframing bg-custom-color"></div>
              </div>
            </div>
          </div>
          <div>
            <div class="w-100 p-3 ps-md-5">
              <div class="bg-dark p-2 text-white rounded-top d-flex justify-content-between">
                <span>Responsive Design</span>
                <span>88%</span>
              </div>
              <div class="containerr bg-dark">
                <div class="skills responsive-design bg-custom-color"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="p-5 bg-dark h-100 w-100" id="portfolio">
      <button type="button" class="btn-close bg-custom-color" onclick="portfolioClose()"></button>
      <div class="d-flex gap-3 justify-content-center text-custom-color py-3">
        <span class="bg-white line mt-3"></span>
        <span class="h5">My Recent Portfolio</span>
        <span class="bg-white line mt-3"></span>
      </div>
      <div class="container py-3 ">
        <div class="row gap-3 justify-content-center">
          <div class="col-12 col-sm-6 col-md-4 col-lg-6">
            <div class="cardd border text-white p-1 text-center rounded-3 h-100">
              <img
                src="https://img.freepik.com/free-psd/minimalist-scrapbook-web-design-template_23-2149197312.jpg?w=996&t=st=1696998010~exp=1696998610~hmac=f1dd2dcf1f36ba1307842bb5df96f3eb1e4a1131fdcb3ac93bec9c826345604b"
                class="card-img-top img-fluid">
              <div class="card-body">
                <h6>Portfolio Page</h6>
                <p>ipsum dolor sit amet, consectetur adipisicing elit.</p>
                <button class="btn bg-custom-color-demo">View Demo</button>
              </div>
            </div>
          </div>

          <div class="col-12 col-sm-6 col-md-4 col-lg-5">
            <div class="cardd border text-white p-1 text-center rounded-3 h-100">
              <img
                src="https://img.freepik.com/free-psd/website-design-your-business_24972-394.jpg?w=826&t=st=1696998038~exp=1696998638~hmac=7c7e2db9cdc2136dac69a4b886bff1fc8d2211bfa286e041007fc9bc62ec21f5"
                class="card-img-top img-fluid">
              <div class="card-body">
                <h6>Portfolio Page</h6>
                <p>ipsum dolor sit amet, consectetur adipisicing elit.</p>
                <button class="btn bg-custom-color-demo">View Demo</button>
              </div>
            </div>
          </div>
        </div>
        <div class="row gap-3 justify-content-center mt-3">

          <div class="col-12 col-sm-6 col-md-4 col-lg-5">
            <div class="cardd border text-white p-1 text-center rounded-3 h-100">
              <img
                src="https://img.freepik.com/free-psd/web-template-with-landing-page-traditional-italian-food-restaurant_23-2148526098.jpg?w=996&t=st=1696998093~exp=1696998693~hmac=6b475d4d0ca2943a5a8aae22dd9d82d0dccff1310659bb4bf8c57b5b390e98a2"
                class="card-img-top img-fluid">
              <div class="card-body">
                <h6>Portfolio Page</h6>
                <p>ipsum dolor sit amet, consectetur adipisicing elit.</p>
                <button class="btn bg-custom-color-demo">View Demo</button>
              </div>
            </div>
          </div>

          <div class="col-12 col-sm-6 col-md-4 col-lg-6">
            <div class="cardd border text-white p-1 text-center rounded-3 h-100">
              <img
                src="https://img.freepik.com/free-psd/user-interface-design-website-template_23-2149182791.jpg?w=996&t=st=1696998114~exp=1696998714~hmac=d3bb29dc524b501758cc4e4e00bedefe1e8357c06bfe74d25717fd2268973b8e"
                class="card-img-top img-fluid">
              <div class="card-body">
                <h6>Portfolio Page</h6>
                <p>ipsum dolor sit amet, consectetur adipisicing elit.</p>
                <button class="btn bg-custom-color-demo">View Demo</button>
              </div>
            </div>
          </div>

        </div>
      </div>

    </section>
    <section class="h-100 services-section bg-dark w-100 py-5 py-md-3 pb-md-0 p-md-3
" id="contact">
      <button type="button" class="btn-close about-close bg-custom-color" onclick="contactClose()"></button>
      <div class="d-flex py-1 gap-3 justify-content-center text-custom-color">
        <span class="bg-white line mt-3"></span><span class="h5">Contact Me</span><span
          class="bg-white line mt-3"></span>
      </div>
      <div class=" d-flex justify-content-center align-items-center h-100 gap-5 social-lg">
        <i class=" iconn instagram" aria-label="Instagram" style="color: #f0db4f;"></i>
        <i class=" iconn codepen" aria-label="CodePen" style="color: #f0db4f;"></i>
        <div class="linkedin">
          <i class=" fa-brands fa-linkedin h1 " aria-label="LinkedIn" style="color: #000000;"></i>
        </div>
        <i class=" iconn github" aria-label="GitHub" style="color: #f0db4f;"></i>
        <i class=" iconn x" aria-label="X" style="color: #f0db4f;"></i>
      </div>
      <div class="d-flex gap-5 justify-content-center w-100 px-2 social-sm d-md-none">

        <a href="#">
          <i class="py-2 h5 me-md-0 fa-brands fa-instagram text-white"></i>
        </a>

        <a href="#">
          <i class="py-2  h5 me-md-0 fa-brands fa-google-plus text-white"></i>
        </a>
        <a href=" #">
          <i class="py-2 h5 fa-brands fa-linkedin text-white"></i>
        </a>

      </div>
    </section>
  </div>