@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Aoboshi+One&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Amaranth&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Amaranth&family=Bubblegum+Sans&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Aldrich&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Andika&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Atma:wght@600&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Ubuntu&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Candal&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');

  body {
      padding: 0;
      margin: 0;
      background: #392467;
      overflow-x: hidden;
      scroll-behavior: smooth;
      /* overflow-y: hidden; */
  }

  nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  nav ul li a {
      text-decoration: none;
      font-family: 'Aoboshi One', serif;
      color: white;
      font-size: 25px;
  }

  nav ul li {
      list-style: none;
  }

  nav ul {
      gap: 90px;
      display: flex;
      margin-left: 46px;
  }

  .downloadcv a {
      position: absolute;
      right: 32px;
      top: 15px;
      list-style: none;
      text-decoration: none;
      /* font-family: 'Aclonica', sans-serif; */
      font-size: 25PX;
      color: white;
      font-family: 'Aoboshi One', serif;
      transition: all 0.4s ease-in-out;
  }

  .downloadcv a:hover {
      transform: scale(1.09);
      transition: all 0.4s ease-in-out;
  }

  .downloadcv img {
      width: 220px;
      position: relative;
      /* left: 37px; */
      right: 8px;
      top: 2px;
      /* height: 41px;*/
      transition: all 0.5s ease-in-out;
  }

  .banner a img {
      width: 11%;
      position: absolute;
      left: 3%;
      top: 75px;
  }

  .banner h2 {
      position: absolute;
      top: 25px;
      font-family: 'Amaranth', sans-serif;
      color: white;
      font-weight: 300;
      top: 18%;
      left: 18%;
      font-size: 20px;
  }


  .section h4 {
      font-family: 'Aoboshi One', serif;
      font-size: 15px;
      color: white;
      font-weight: 400;
      margin: 0;
  }

  .connect {
      display: flex;
      position: absolute;
      top: 29%;
      right: 2%;
      align-items: center;

  }

  .connectimg {
      display: flex;
      align-items: center;
      position: relative;
      margin-top: 9px;
      gap: 4px;

  }

  .connectimg li a {
      text-decoration: none;
  }

  .connectimg li {
      list-style: none;
      text-decoration: none;
  }

  #link img {
      width: 25px;
  }

  #x img {
      width: 19px;
  }

  .connectimg {
      margin-left: 5px;
  }

  .connectimg img {
      width: 20px;
  }

  .heading h1 {

      color: white;
      font-size: 70px;
      margin: 0;
      font-weight: 400;
      letter-spacing: 3px;
      /* font-family: 'Aclonica', sans-serif; */
      font-family: 'Aoboshi One', serif;
      text-shadow: 0px 8px 40px rgba(255, 255, 255, 0.316);
  }

  .heading h2 {
      font-size: 50px;
      margin: 0;
      letter-spacing: 3px;
      font-weight: 400;
      font-family: 'Aclonica', sans-serif;
      font-family: 'Aoboshi One', serif;
      color: white;
      text-shadow: 0px 8px 40px rgba(255, 255, 255, 0.316);

  }

  .heading {
      position: relative;
      top: 80px;
      left: 15%;
  }

  .iknow {
      position: absolute;
      right: 90px;
      align-items: center;
  }

  .iknow h1 {
      font-family: 'Bubblegum Sans', sans-serif;
      color: white;
      font-weight: 300;
  }

  .know {
      display: flex;
      justify-content: center
  }

  .img {
      display: flex;
      justify-content: center;
  }

  .img img {
      width: 60px;
  }

  .overlay {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      top: 10rem;
      /* left: 11rem;
      right: 11rem; */
      /*width: 1000px;
      border-radius: 30px;
      height: 350px;
      background-color: #5D3587;
      margin-bottom: 30px; */
  }

  .inerabout {
      position: relative;
      left: 0%;
      top: -352px;
  }

  .inercontent {
      position: relative;
      top: -43vh;
  }

  .ul {
      line-height: 3;
      font-size: 1.3rem;
  }

  .about {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin: 0;

  }

  .about h1 {
      color: #FFF;
      margin: 0;
      margin-top: 20px;
      margin-bottom: 10px;
      font-family: 'Aclonica', sans-serif;
      font-size: 2.5rem;
      text-shadow: 0px 8px 40px rgba(0, 0, 0, 0.25);
      font-style: normal;
      font-weight: 400;
      line-height: normal;
  }

  .aboutcontent h1 {
      color: #D2D2D2;
      margin: 0;
      text-align: center;
      text-shadow: 0px 8px 40px rgba(0, 0, 0, 0.25);
      font-family: 'Aldrich', sans-serif;
      font-size: 1.8rem;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
  }

  .aboutcontent p {
      font-family: 'Andika', sans-serif;
      color: #fff;
  }

  .aboutcontent ul li {
      font-family: 'Andika', sans-serif;
      color: #fff
  }

  .marquee {
      position: relative;
      top: 213px;
  }

  .marquee h1 {
      font-family: 'Ubuntu', sans-serif;
      font-size: 5rem;
      margin-bottom: px;
      color: #ffffff08;
  }

  .projects img {
      width: 28%;
  }

  .projects h1 {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      top: -14vh;
      font-size: 3rem;
      color: white;
      font-family: 'Aclonica', sans-serif;
      text-shadow: 0px 8px 40px rgb(0, 0, 0);
  }

  .probg {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .project-flexo {
      display: flex;
      justify-content: center;
      align-items: center;
      /* right: -4%;
    position: relative; */
  }

  .ultable {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: justify;
  }

  /* .rectangle-shape{
    display: flex;
    justify-content: center;
    align-items: center;
  } */
  .bg-rec {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      margin-top: -69px;

  }

  .bg-rec li {
      list-style: none;
  }

  .bg-rec img {
      width: 100%;
      display: flex;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      transition: all 0.3s ease-in-out;
  }


  .text-rec {
      position: relative;
      top: -20px;
      /* color: white; */
      width: 100%;
      height: 15vh;
      background: #fff;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      transition: all 0.3s ease-in-out;
  }

  .text-rec:hover {
      box-shadow: 0px 8px 40px rgba(177, 177, 177, 0.397);
  }

  .text-rec h1 {
      font-family: 'Candal', sans-serif;
      color: #000;
      margin: 0;
      font-size: 20px;
      font-weight: 400;
      padding-left: 10px;

  }

  .text-rec p {
      font-family: 'Amarnath', sans-serif;
      font-size: 15px;
      font-weight: 400;
      color: #4f4f52;
      padding-left: 10px;
  }

  .text-rec a {
      text-decoration: none;
  }

  .marquee-projects {
      font-family: 'Ubuntu', sans-serif;
      font-size: 5rem;
      margin-bottom: 0px;
      color: #ffffff08;

  }

  .contactbg {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .contacthead-flexo {
      color: #D2D2D2;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      top: -450px;
  }

  #c-us {
      font-size: 1.9rem;
      font-family: 'Ubuntu', sans-serif;
  }

  .p1 {
      font-size: 1.5rem;
      font-family: 'Ubuntu', sans-serif;
  }

  #bannerimgrec {
      width: 100%;
      height: 166px;
  }

  .p2,
  .p3,
  .p4 {
      font-size: 14.5px;
      font-family: 'Ubuntu', sans-serif;
      font-weight: 400;
  }

  .p3 a {
      color: #6b88ff;
  }

  footer {
      width: 100%;
      height: 8vh;
      background: #A367B1;
  }

  footer p {
      font-family: 'Ubuntu', sans-serif;
      font-weight: 600;


  }

  .copyrights {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-top: -53px;
  }