.App {
  font-family: sans-serif;
  text-align: center;
}

.Navbar {
  display: flex;
  gap: 30px;
  background-color: black;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.each {
  font-size: 1.6em;
  color: white;
  text-decoration: none;
  position: relative;
  right: -700px;
  top: 20px;
}

.Heading {
  color: white;
  position: relative;
  right: -30px;
}

span:hover {
  color: rgb(184, 187, 190);
}

.footer {
  background-color: black;
  position: relative;top:-50px;
  height: 200px;
  width: auto;
}

.Copyright {
  position: relative;
  top: 50px;right:-600px;
  font-size: 1.2em;
  color: rgb(218, 211, 211);
}

.Leftside {
  display:grid;
  grid-template-rows: auto;
  justify-content: center;


  color: white;

  position: absolute;
  left: 50px;
  margin-right: 10px;
}

.nala {
  position: relative;
  right: -5px;
}

.naga {
  position: relative;
  left: -5px;
}

.Rightside {
  font-size: 1.9em;
  color: rgb(196, 199, 201);
  position: absolute;
  right: 100px;
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  
}

.social {
  position: relative;
  top: 30px;
  color:rgb(195, 87, 195)
 
 
  height: 50px;
  width: 50px;
 
}

.social:hover {
  color: rgb(141, 149, 152);
}

.invite {
  position: relative;
  top: 20px;right: -500px;
  color: white;
  font-size: 1.4em;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.invite1{
  position: relative;
  top: 20px;right: -540px;
  color: white;
  font-size: 1.4em;
  font-family: Georgia, "Times New Roman", Times, serif;
}


.Layout {
  position: relative;
  top: -25px;
  bottom: -50px;
  height: 800px;
  width: auto;
  background-image: url("aboutmebg.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
}



.Me {
  color: yellow;
}

.Content {
  font-size: large;
  border: 4px; solid ;
  border-color: white;
  position: relative;
  top: 200px;
  right: -250px;
  height: 200px;
  width: 600px;
  color: white;
}
.Name{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

}

.haha{
  color: rgb(204, 195, 195);
}

.Contactis{
  padding: 10px;
  font-size: larger;
  color: black;
  background-color: yellow;
  border-radius: 10%;
}

.Contactis:hover{
  background-color: rgb(234, 234, 183);
  cursor: pointer;
}

.pfp{
  height: 400px;
  width: 300px;
  position: relative;right: -900px;top:100px;
  border-radius: 10%;
  transform: translateY(-50%);
  animation: slide 2s linear ;
}


@keyframes slide{
  0%{
  right: -800px
  }
  100%{
   right: -900px
  }
}



.form-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

.form-group textarea {
  resize: vertical;
  height: 100px;
}

.form-group button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.form-group button:hover {
  background-color: #45a049;
}

.contactbg{

  background-image: url("contactnew.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.contactinvite{
  color: black;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.myskills{
  color: white;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  position: relative;left:200px;top:-100px;
}

.logo{
  height: 100px;
  width:100px;
  position: relative;top:-100px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logos{
  
  display: flex;
  justify-content: center;
  align-items: center;
  gap:50px;
}



.fline{
  display:flex;
  justify-content:center;
  align-items:center;
  color:white;
  position:relative;top:40px;
  font-size: 3em;
}


.TTT{
  height:200px;
  width:400px;
  border:2px solid white;
}

.project1{

  height: auto;
  width:1000px;

  position: relative;right:-100px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;

  animation:moveLeft 2s linear;
}

@keyframes moveLeft{
  0%{

    transform:translateX(300px)

  }

  100%{
        transform:translateX(50px)

  }


}


.Qr{
  height:200px;
  width:400px;
  border:2px solid white;
}

.project2{

  height: auto;
  width:1000px;

  position: relative;left:400px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;

  animation:moveRight 2s linear;


}

@keyframes moveRight{
  0%{

    transform:translateX(-100px)

  }

  100%{
        transform:translateX(100px)

  }


}





.projectlayout{

  position:relative;top:-30px;
 
  background-image:url("projectbg.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height:1100px;
}

.pp{
  color:white
}

.Adjust{
  position:relative;top:100px;
}