@import url("https://fonts.googleapis.com/css2?family=Anton+SC&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Itim&family=Pacifico&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&display=swap");

* {
  margin: 0;
  padding: 0;
  
}

.navbar {
  display: flex;
  height: 50px;
  justify-items: center;
  align-items: center;
  border-bottom: 0.1px solid rgb(119, 92, 92);
}

.navbar p {
  font-size: 30px;
  padding: 30px;
}

.navbar ul {
  display: flex;
  position: relative;
  justify-content: space-evenly;
  left: 730px;
  width: 400px;
  list-style-type: none;
  justify-content: space-between;
}
.navbar li a {
  text-decoration: none;
  color: rgb(0, 0, 0);
}

.navbar li a:hover {
  background-color: rgb(89, 0, 255);
  color: rgb(244, 245, 248);
  /* padding: 2px; */
  border: 5px;
  /* size: 10px; */
  /* margin: 5px; */
}
.divider {
  border: 0.1px solid rgb(233, 224, 224);
  top: 40px;
  position: relative;
}

/* =================================Hero Section design======================================== */

.hero {
  display: flex;
  /* margin-top: px; */
  padding: 250px;
  height: 100px;
  background-color: rgb(251, 255, 0);
  width: 850px;
}

.data {
  position: absolute;
  left: 200px;
  top: 150px;
  margin: 5px;
  padding: 50px;
}

.data pre {
  font-family: "Playwrite GB S", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 30px;
}
.data pre span {
  color: blue;
}

.data button {
  padding: 3px;
  border: 1px solid blue;
  position: absolute;
  bottom:45px;
  border-radius: 5px;
  background-color: blue;
  color: white;
  font-family: "Playwrite GB S", serif;
  font-size: 15px;
  font-style: bolder;
  height: 35px;
  width: 85px;
}
.data button:hover {
  background-color: rgb(0, 0, 0);
  color: whitesmoke;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 5px;
}

.pic {
  display: flex;
    left: 870px;
    position: absolute;
    background-color: blue;
    border-radius: 50%;
    top: 195px;
}

.pic img {
  border-radius: 50%;
  height: 300px;
  width: 300px;
}

.link {
  display: flex;
  margin: 10px;
  position: relative;
  top: 120px;
  height: 35px;
  left: -33px;
  /* background-color: blue; */
  justify-content: space-evenly;
  padding: 10px;
  width: 150px;
}
.link i:hover {
  border-radius: 1px;
  color: rgb(0, 97, 243);
}

.link a i {
  font-size: 30px;
  color: rgb(0, 0, 0);
  cursor: pointer;
}

/* ============================= about section design========================================= */

.about {
  padding: 250px;
  display: flex;
  height: 100px;
  background-color: rgb(0, 255, 200);
  width: 850px;
}

/* .about .about-img {
  display: flex;
  width: 310px;
  height: 310px;
  margin-left: 200px;
  position: relative;
  top: 140px;
  background-color: blue;
  border-radius: 10%;
} */
.about .about-img {
  display: flex;
  width: 310px;
  height: 310px;
  position: relative;
  top: -100px;
  background-color: blue;
  border-radius: 10%;
}
.about .about-img img {
  width: 300px;
  height: 300px;
  border-radius: 10%;
  padding: 5px;
  /* padding-bottom:1px ; */
}

.about .info {
  width: 450px;
  height: 189px;
  position: relative;
  /* right: -70px; */
  left: 45px;
  bottom: 50px;
}

.info h3 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: bolder;
  font-size: 20px;
}

.info p {
  font-family: "IBM Plex Serif", serif;
  font-optical-sizing: auto;
  font-size: 13px;
  position: relative;
  top: 50px;
}

.about .info h3 {
  top: 20px;
  position: absolute;
}

.about button {
  border: 1px solid blue;
  position: relative;
  border-radius: 5px;
  background-color: blue;
  color: white;
  font-family: "Playwrite GB S", serif;
  /* font-size: 15px; */
  height: 30px;
  width: 80px;
  cursor: pointer;
  top: 130px;
  right: 405px;
}
  .about button:hover {
    background-color: rgb(12, 233, 23);
    color: rgb(0, 0, 0);
  border: 1px solid rgb(24, 22, 22);
  border-radius: 5px;
}
.about .info h3 span {
  color: blue;
}
/* ============================= SKills section designx========================================= */

.skills {
  display: flex;
  background-color: rgb(130, 243, 0);
  /* margin-top: 0px;
  padding: px; */
  /* color: rgb(0, 0, 0); */
  height: 100px;
  padding: 250px;
width: 850px;
}





.heading {
  /* display: flex; */
  justify-content: center;
  /* align-items: center; */
  position: relative;
  /* height: 55px; */
  width: 100%;
  height: 100px;
  bottom: 170px;
  left: 300px;

}

.heading h3 {
  font-size: 40px;
  }



.heading p {
  /* position: relative;  */
  /* display: inline; */
  /* top: 25px; */
  /* right: 10px ; */
}

.hr0 {
  position: absolute;
  width: 593px;
  height: 175px;
  border: 0.1px solid rgb(0, 0, 0);
  top: -40px;
    right: 200px;
}
hr {
  width: 640px;
  position: absolute;
  top: 65px;
  border: 0.1px solid black;
  left: -300px;
}

.content {
  width: 610px;
  position: relative;
  top: -50px;
  height: 100px;
  display: -webkit-box;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin: 50px;
  left: -250px;
  font-size: 15px;
  font-family: "Playwrite GB S", serif;
}

.about-imgggg img {
  width: 300px;
  height: 300px;
  bottom: -110px;
  position: absolute;
  border-radius: 30px;
  left: 730px;
  background-color: aqua;
}

/* ============================= project section designx========================================= */

/* .project {
  display: inline-block;
  background-color: rgb(64, 3, 105);
  color: rgb(0, 0, 0);
  height: 650px;
  width: 100%;
} */
.project{
display: flex;
  background-color: rgb(0, 243, 243);
  /* margin-top: 0px;
  padding: px; */
  /* color: rgb(0, 0, 0); */
  height: 100px;
  padding: 250px;
width: 850px;
}
.project .images {
  display: inline;
  width: 772px;
  height: 310px;
  position: absolute;
  left: 290px;
  top: 2030px;
}

.project .images img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
}

.project #heading {
  color: rgb(8, 8, 8);
  position: relative;
  left:350px;
   top: -200px;
     font-size: 40px;
     font-size: 40px;
}

#hr00 {
  width: 640px;
  position: absolute;
  top: 1900px;
  left: 360px;
  border: 0.1px solid rgb(17, 15, 15);
}

/* ============================= project section designx========================================= */

.contact {
  display: flex;
  background-color: rgb(243, 166, 0);
  /* margin-top: 0px;
  padding: px; */
  /* color: rgb(0, 0, 0); */
  height: 50px;
  padding: 250px;
width: 850px;
}

.contact span {
  font-size: 40px;
  top: -170px;
  position: relative;
  left: 340px;
  width: inherit;
}

.linksss {
  display: flex;
  position: relative;
  left: 20px;
  /* margin: 100px; */
  padding: 20px;
  top: 185px;
}

.linksss a {
  justify-content: space-between;
  font-size: 30px;
  color: black;
  cursor: pointer;
}

.footer {
  display: flex
;
  bottom: -289px;
  position: relative;
  left: -150px;
  /* margin: 15px; */
  /* top: 2830px; */
  font-size: 20px;
  width: 100%;
  /* flex-wrap: nowrap; */
  /* justify-content: flex-start; */
  align-items: flex-end;
  height: 10%;
}



#footerid {
  position: relative;
  /* top: auto; */
  border: 0.1px solid rgb(18 13 13);
  /* top: 190px; */
  display: flex;
  right: -25px;
  top: 200px;
}

/* ==================================== Thanks you for copying mujhe 4 din laga banane me ========================================== */