*{
    font-family: 'Poppins',sans-serif;
    
}
body {
 background: linear-gradient(to bottom,#012633,rgb(1, 1, 57));
}


.navbar{
    margin-top: -5px;
    margin-bottom: 2rem;
    position:sticky;
    top: 0;
   z-index: 10;
   display: flex;
    align-items: center;
    justify-content: center;
     height: 5rem;
     background-color: rgb(3, 3, 96);
     }
.navbar a{
    margin: 0.9rem;
    font-size: larger;
        text-decoration: none;
        color: #fff;
      
       

}
.main_content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   
   
    
   
}
 #section{
    
    width: 100%;
    
}
 .info{
  display: flex;
    align-items: center;
    justify-content: center;
  flex-direction: column;
 
   color: #E0E0E0;
    width: 100%;
    border-radius: 2rem;

}
.info .description{
    justify-content: center;
    margin-left: 25%;
    margin-bottom: 2rem;
}
.info .i1{
    
    left: 20rem;
    font-size: 2rem;
   padding-left: 17%;
   
    
}
.info .i2{
    
   
   margin-left: 3px;
   font-size: 3rem;
  font-weight: bold;
  background: url(hii.jpeg) no-repeat center;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.info .i3{
    
    margin-left: -15%;
    margin-top: 2rem;
    font-size: 2rem;
}



.info .img{
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    box-shadow: 0 0 10px #00f7ff;

}
.img:hover{
    box-shadow: 0 0 20px #00f7ff;
}
a:hover{
    opacity: 1;
    color: rgb(0, 247, 255);  
}
.button{
    margin-left: 19%;
    background-color: #00D1FF;
    border-radius: 30px;
    font-size: 30px;
    border: none;
    padding: 10px;
}
.button:hover{
    opacity: 1;
    box-shadow: 0 0 15px #00D1FF;
    font-size: 30px;
}

.About{
  display: flex;
  position: relative;
  align-items: center;
    justify-content: center;
  flex-direction: column;

    width: 80%;
    border-radius: 2rem;
    background-color: #012633;
    box-shadow: 0 0 5px #c2c4c4;

}
.Edu{
 display: flex;
  margin-top: 2rem;
  align-items: center;
    justify-content: center;
  flex-direction: column;
   
    width: 80%;
    border-radius: 2rem;
    background-color: #012633;
     color: #A0A0A0;
     background-color: #012633;
    box-shadow: 0 0 5px #c2c4c4;
}
 
.P1{
      margin-left: -55rem;
    font-size: 2rem;
    color: #E0E0E0;
}

 
.p1{
      margin-left: 5rem;
    font-size: 2rem;
    color: #E0E0E0;
}
.p2{
    color: #A0A0A0;
    font-size: 1.2rem;
    margin:  3rem 10rem 3rem 10REM;
}

.skills{
    margin-top: 2rem;
    padding: 0 0 2rem 0;
        background-color: #012633;
    box-shadow: 0 0 5px #c2c4c4;
  
    width: 80%;
    border-radius: 2rem;
    justify-content: space-between;
}
.skkl0,.skkl1,.skkl2,.skkl3,.skkl4{
      display: inline-block;
    align-items: center;
    justify-content: center;
    background-color: aliceblue;
    color: #f80606;
    width: 5rem;
    margin-top: 2rem;
    margin-left: 7rem;
    border-radius: 1rem;
    text-align: center;
    
}
.pro{
    margin-top: 2rem;
    width: 80%;
       background-color: #012633;
    box-shadow: 0 0 5px #c2c4c4;
   border-radius: 2rem;
   
}
.project{
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 2rem;
    
    
   
    
}

.pcard{
    width: 25%;
   
    border: solid #1E1E1E;
    border-radius: 2rem;
    background-color: #1E1E1E;
}
.pcard:hover{
    box-shadow: 5px 5px 10px #00f7ff;
}

.imgp{
    border-radius: 2rem 2rem 0 0;
    width: 100%;
    height: 13rem;
}
.a{
   
    color:rgb(7, 242, 242);
    padding: 0 0.5rem 0.5rem 0.5rem;
}
.pp{
    color: #A0A0A0;
}
.btn{
    padding:0.7rem;
   
    margin: 0.5rem;
    background-color: #00f7ff;
    border-radius: 2rem;
    font-size: 1rem;
}
.btn:hover{
    background-color: #1ac9cf;
    box-shadow: #049ba0;
    text-decoration: dotted underline;
}
.contact{
  
     height: 568px;
    width: 530px;
    padding: 48px 32px 0 0;
    margin: 5rem 250px 2rem 250px;
    border:2px solid rgb(94,92,92);
    box-shadow: 2px 2px 10px rgb(94, 92, 92);
  
    
}
 .contact h2{
    font-size: 2rem;
    border-bottom: 2px solid #64ffda;
    padding-bottom: 0.3rem;
    margin-bottom: 2rem;
    margin-left: 2rem;

    color: #E0E0E0;
}
form{
     display: flex;
   align-items: center;
   
   flex-direction: column;
   height: 550px;
   width: 100%;
}
.contact:hover{
    box-shadow: 0 0 20px #A0A0A0;
}
 label{
    color: aliceblue;
    margin-bottom: 0.5rem;
    margin-left: -23.5rem;
}
.label{
    color: aliceblue;
    margin-bottom: 0.5rem;
    margin-left: -21.2rem;
}
.name{
    appearance: none;
    border: 2px solid rgb(94, 92, 92);
    height: 1.5rem;
    width: 28rem;
    color: #A0A0A0;
    background-color: #100f0f;
    margin-bottom: 2rem;
    margin-left: 2rem;
    padding: 0.3rem;
}
.text{
 appearance: none;
    border: 2px solid rgb(94, 92, 92);
     color: #A0A0A0;
      margin-left: 2rem;
    background-color: #100f0f;
    width: 28rem;
}

.msgbtn{
    appearance: none;
    margin: 2rem;
    box-shadow: 2px 2px 10px #00f7ff;
    border: 0;
      cursor: pointer;
   color: #040404 ;
   margin-left: 4rem;
    background: linear-gradient(to right,#1293ea,#2ec9ce);
    height: 3rem;
    width: 20rem;
    border-radius: 2rem;
    font-size: 1.5rem;


}


@media (max-width:800px) {
    
    
}
.footer{
    display: flex;
   color: #fff;
    justify-content: center;
    width: 100%;
    height: 19rem;
    background-color: rgb(23, 23, 23);
    font-size: larger;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:lighter;
}
#location
{
    padding: 40px;

}

#phone
{
    padding: 20px;
    margin-left: 8rem;

}
.iconn i  {
    display: inline-block;
    justify-content: center;
    margin: 2rem;
    padding-left: 3rem;
     

    
}
i{
    color: #00f7ff;
}

i:hover{
    color: #220fd2;
  
}
hr{
    width: 100%;
}
.footer .arrow{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 50px;
    width: 50px;
    background-color: #0aa1f1;
    border-radius: 20px;
   color: #220fd2;
   
   
    
   
}

.h{    display: flex;  justify-content: center;}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

/* Make images fit screen */
img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 768px) {

  /* NAVBAR */
  .navbar {
    height: auto;
    padding: 10px;
    flex-wrap: wrap;
  }

  .navbar a {
    font-size: 14px;
    margin: 6px;
  }

  /* HERO SECTION */
  .info .description {
    margin-left: 0;
    text-align: center;
  }

  .info .i1,
  .info .i3 {
    margin-left: 0;
    padding-left: 0;
    font-size: 1.1rem;
  }

  .info .i2 {
    font-size: 2rem;
  }

  .info .img {
    width: 160px;
    height: 160px;
  }

  .button {
    margin-left: 0;
    font-size: 1rem;
  }

  /* ABOUT / EDU */
  .About,
  .Edu,
  .skills,
  .pro {
    width: 95%;
  }

  .p2 {
    margin: 1rem;
    font-size: 1rem;
  }

  .P1,
  .p1 {
    margin-left: 0;
    text-align: center;
  }

  /* SKILLS */
  .skkl0,.skkl1,.skkl2,.skkl3,.skkl4 {
    margin-left: 1rem;
    margin-top: 1rem;
  }

  /* PROJECTS */
  .project {
    flex-direction: column;
    align-items: center;
  }

  .pcard {
    width: 90%;
    margin-bottom: 1.5rem;
  }

  /* CONTACT */
  .contact {
    width:
  }
.pcard .btn {
  display: block;
  margin: 1rem auto 0 auto;
}