* {
  margin: 0;
  padding: 0;
}

:root {
  --navbar-background-color: rgb(55, 118, 118);
  --background-color: azure;
  --button-culor: rgb(11, 186, 11);
  --button-color-hover: rgb(9, 207, 9);
  --header-font-style: bold;
  --border-radius: 20px;
  --box-hover-shadow: 20px;
  --transition-hover: scale(1.1);
  --submit_button-background-color: rgb(25, 232, 255);
  --font-used: Ariel;
}

html {
  scroll-behavior: smooth;
  scroll-padding: 6rem;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--light-color);
  overflow-x: hidden;
}
/*========= NAVBAR PART OF THE SECTION ======*/

.navbar {
  height: 5rem;
  width: 100vw;
  background-color: var(--navbar-background-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}
.nav-info {
  width: 80%;
  height: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo_user {
  font-size: 40px;
  font-weight: 900;
  font-family: Arial, Helvetica, sans-serif;
}
.nav-links {
  width: 60%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.nav-links a {
  color: rgb(0, 0, 0);
  font-size: 20px;
  text-decoration: none;
}

/*=============================== HOME SECTION ========================*/
.section-home {
  padding: 80px 0 20px 0;
  max-width: 99vw;
  height: auto;
  background-color: azure;
}
.section-home-body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.body-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 4vw;
  flex-wrap: wrap;
  width: 70%;
}
.user-info {
  width: 27rem;
}
.about-user {
  width: 95%;
  text-align: center;
  font-size: 17px;
  padding: 10px 0 10px 0;
}
.user-info h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 5vh;
  height: 8rem;
  width: 95%;
}

.button1 {
  height: 40px;
  width: 95%;
  background-color: var(--button-culor);
  border-radius: var(--border-radius);
  border: none;
  transition: 400ms;
  margin: 15px 0px 15px 0px;
}
.button1:hover {
  transform: scale(1.1);
  background-color: rgb(5, 215, 5);
}

.user1-info {
  height: 400px;
  width: 400px;
  border: 1px solid black;
  border-radius: var(--border-radius);
  box-shadow: var(--box-hover-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-user {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  background-image: url(desh.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

/*==================== ABOUT SECTION =============================*/

.about-section {
  height: auto;
  width: 100%;
  padding-top: 30px;
  border-top: 1px solid black;
  background-color: azure;
}
.about-body {
  height: 40rem;
  width: 80%;
  margin: 0 10% 0 10%;
}
.about-body .header2 {
  height: 5rem;
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
}
.about-body2 {
  height: 30rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.about1 {
  width: 30rem;
  height: auto;
  padding-bottom: 10px;
  font-size: 17px;
}

.about-id {
  width: 35rem;
  height: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.id-box {
  width: 20rem;
}

.about-btn {
  height: 6rem;
  width: 13rem;
  margin: 10px;
  border-radius: var(--border-radius);
  background-color: cadetblue;
}

/*======================= PROJECTS SECTION =========================*/

.projects{
    width: 100%;
    height: auto;
    padding-top: 30px;
    background-color: var(--background-color);
    border-top: 1px solid black;
}
.projects h1{
    font-size: 2rem;
    text-align: center;
}

.projects-body{
    height: auto;
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5% 10% 5% 10%;
    flex-wrap: wrap;
}

.projects-body1{
    height: 300px;
    width: 430px;
    border: 1px solid black;
    margin: 20px 20px 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center; 
    background-color: rgb(204, 255, 255);
    border-radius: var(--border-radius);
    transition: 400ms;
    cursor: pointer;
    
}
.projects-body1:hover{
  transform: scale(1.1);
  background-color: rgb(179, 243, 243);;
}
/* .projects-body1:active{
  transform: scale(0.9);
  background-color: rgb(179, 243, 243);;
} */
.project-inner-border{
    height: 255px;
    width: 350px;
    border: 1px solid black;
    border-radius: var(--border-radius);
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
    
}
.pro-infor{
    height: 50px;
    width: 100%;
    text-align: center;
}

.last{
    height: 55px;
    display: flex;
}
.last1{
    width: 50%;
    height: 55px;
    background-color: cadetblue;
    display: flex;
    align-items: center;
    border-bottom-left-radius: var(--border-radius);
}
.last2{
    width: 50%;
    height: 55px;
    background-color: cadetblue;
    display: flex;
    align-items: center;
    border-bottom-right-radius: var(--border-radius);
}
.link-pro{
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background-image: url(download1.png);
     background-repeat: no-repeat;
    background-size: contain;
    margin: 0 5px 0 5px;
}
.link-github{
  height: 20px;
    width: 20px;
    border-radius: 50%;
    background-image: url(download.png);
     background-repeat: no-repeat;
    background-size: contain;
    margin: 0 5px 0 5px;
}
.photo1{
    height: 150px;
    width: 100%;
    background-color: rgb(6, 236, 125);
    border-radius: var(--border-radius);
    background-repeat: no-repeat;
    background-size: contain;
}
.photo1 img{
    height: 150px;
    border-radius: var(--border-radius);
}


  /*==================== SKILLS SECTION ==========================*/

  /*+++++++++++++    Pending..................         ++++++++++++ */


  /*=================== CONTACT SECTION =========================*/

  .contact-section{
    height: auto;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid black;
    background-color: var(--background-color);
  }

  .get-in .section-title{
    height: 2rem;
    width: 100%;
    text-align: center;
    font-size: 2rem;
  }

  .container1{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;
    flex-wrap: wrap; 
  }

  .contact-container{
    width: 80%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .contact-info{
    height: auto;
    width: 40rem;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius);
    margin: 3px;
  }
 .contact-info h3{
  text-align: center;
  padding: 1rem 0 1rem 0;
  font-size: 3vh;
 }

 .contact-details{
  height: auto;
  width: 100%;

  font-size: 2vh;

 }
 .emails{
  height: 30px;
  width: 100%;
  padding-top: 20px;
  display: flex;
 }
 .emails a{
  font-size: 2vh;
  padding-left: 10px;
 }
 .logos{
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  background-size: cover;
 }
 .logos img{
  border-radius: var(--border-radius);
 }
.social-links{
  height: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}
.all-details{
  height: auto;
  width: 30vw;
  padding: 20px 0 20px 0;
  border-radius: var(--border-radius);
}

.group-links{
  height: 40px;
  width: 16rem;
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-top: 10px;

}
.social-logo{
  height: 30px;
  width: 30px;
  background-repeat: no-repeat;
  background-size: cover;
}
.social-logo img{
  border-radius: var(--border-radius);

}
/************************ contact *************************/
.from1{
  height: auto;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius);
}

.form-group{
  height: auto;
  width: 30vw;
}

.name-box{
  height: 2.5rem;
  width: 100%;
  padding-left: 10px;
  border-radius: var(--border-radius);
  margin: 5px 0 5px 0;
  border: none;
}

.name-box2{
  height: 10rem;
  width: 100%;
  margin: 5px 0 10px 0;
  padding: 10px 0 0 10px;
  border: none;
  border-radius: var(--border-radius);
}
.send{
  height: 40px;
  width: 100%;
}

.send .button5{
  height: 40px;
  width: 130px;
  padding: 5px;
  background-color: var(--button-culor);
  border-radius: var(--border-radius);
  border: none;
  transition: 400ms;
}
.send .button5:hover{
  background-color: green;
}

.send .button5:active{
  transform: scale(0.9);
}

/*============================= FOOTER SECTION =====================*/

.footer{
  height: auto;
  width: 99vw;
  padding-top: 30px;
  background-color: rgb(24, 24, 126);
  color: aliceblue;
}

.container{
  height: auto;
  width: 100%;

}
.footer-content{
  height: auto;

  width: 90%;
  display: flex;
  margin: 0 5% 0 5%;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.footer-about{
  height: 300px;
  width: 400px;
}
.footer-about h3{
  text-align: center;
}
.footer-about p{
  padding: 50px 10px 20px 10px;
}
.footer-links{
  height: 300px;
  width: 400px;
  margin: 20px 10px 20px 10px;
}

.footer-links h3{
  text-align: center;
}
.footer-links li{
  list-style: none;
  padding-top: 10px;
}
.footer-links li a{
  text-decoration: none;
  color: aliceblue;
  font-size: 18px;

}
.footer-links ul{
  padding-top: 50px;
  text-align: center;
}
.footer-newsletter{
  height: 300px;
  width: 500px;
}
.footer-newsletter h3{
  text-align: center;
}

.footer-newsletter p{
  padding-top: 50px;
  padding-bottom: 30px;
  font-size: 17px;
}
.box-em{
  height: 30px;
  width: 50%;
  border-radius: 5px;
  border: none;
}

.button6{
  height: 30px;
  width: 60px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
.button6:hover{
  background-color: rgb(224, 225, 226);
}
.button6:active{
  transform: scale(0.9);
}
.footer-bottom p{
  text-align: center;
  background-color: rgb(0, 0, 0);
  color: aliceblue;
}