* {
   margin: 0;
   padding: 0px;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
}

body{
   border: 2px dotted #999;
  margin: 0 auto;
  max-width: 100%; 
   
}
.ribon{
  position: sticky;
   top: 0px;
   z-index: 5;
  
}
.container{ 
   
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   background-color: #AEA7D9;
   align-items: center;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 400;
   padding: 4px 10px;
 
} 

.left{
   align-items: center;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   gap: 5px;


}
.container a{ 
   text-decoration: none;
   color: black;

   text-align: center;
   transition: all 0.3s ease-in-out;

}
.container a:hover{
   color: aqua;
}
.container img{
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: absolute;
   transition: all 0.3s ease-in-out;
   cursor: pointer;
}
.container img:hover{
  
   transform: translate(-100%,100%) scale(5);
   
}
.list a{ 
   text-decoration: none;
   color: black;

   text-align: center;
   transition: all 0.3s BDease-in-out;

}
.list a:hover{
   color: aqua;
}

.right ul{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   gap: 20px;
   text-decoration: none;
   list-style-type: none;
}

.right li a{
   text-decoration: none;
   color: black;

}
.description{

display: flex;
}

.back1{

background-color: rgb(233, 223, 223);
   width: 70%;
   height: 50vh;
  
   
   
}
.developer{
   
   background-color: transparent;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bolder;
   font-size: 50px;
   padding-left: 5rem;
   padding-top: 5rem;
   line-height: normal;
 
}

.details{
   

   
   padding-top: 20px;
   text-align: left;
   justify-content: center;
   


  }
  .one{
   color: black;
   font-size: 5rem;
   font-weight: bold;
   
   padding-left: 10rem ;

  }
.image img{
   position: absolute;
   z-index: 2;
   width: 130px;
   height: 150px;
   left:70%;
   top: 20vh;
   transform: translateX(-50%);
   border: 3px solid rgb(185, 174, 174);   
}


.back3{
   background-color: rgb(112, 155, 55);
 
   width: 30%;
   height: 50vh;
   z-index: 1;
   right: 0;
   
}
.back1{
padding: 40px;

}

 
 
 
.one{
   font-size: small;
  }
 .tow{ position: absolute;
   font-size: small;
   left: 40vh;
   top: 22vh;

   
  }

  

  /* Resoume */

  .education{

   
   margin-top: 5rem;
   padding-left: 1rem;
   padding-right: 1rem;
   

   }
   .education h1{
     margin-top: 5rem;
    text-align: center;
    
  
   }
   .up-edu{
       display: flex;
       flex-wrap: wrap;
       justify-content: space-around;
   
       
   }
.right-edu{
   justify-content: center;

   margin-top: 3rem;
 text-align: center;
 align-items: center;
 align-content: center;
   
}
   .subtitle{
       display: inline-block;
    font-size: 1.25rem;
    line-height: 1.6rem;
    width: 100px;
    text-align: center;
   

   }

   .line{
    background-color: #333;
    width: 95px;
    height: 5px;
    margin: 1px;
    border-radius: 1px;
   }

.inner-line{
    background-color: skyblue;
    width: 28px;
    height: 5px;
    border-radius: 1px;
    
}


   




.resume-list{
    position: relative;
    display: flex;
    margin-top:20px ;
 height: 50px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
   gap: 15px;
   border-left: 2px solid #333;
}

.resume-duration{
    background-color: #333;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 10px;
    color: white;
    line-height: 20px;

}

.resume-duration-container {
    display: flex;
    align-items: center;
    padding-left: 20px;
    
}

.round-div{
    height: 24px;
    width: 24px;
    background-color: #222;
    position: absolute;
    border-radius: 50%;
    left: -12.5px;
}
.resume-company {
    opacity: 0.8;
  }
  
.description{
    width: auto;
}


/*  Certificate Section */
.certificate{
    
   margin-left: 100px;
   margin-right: 100px;
   align-items: center;
   justify-content: center;
}

.certificate-heading{
   position: relative;
   left: 45%;
   align-items: center;
  margin-left: auto;

   margin-bottom: 100px;
}

.certificate-heading h2{
   font-family:Arial, Helvetica, sans-serif;
   font-size: 30px;
  
}

.certificate-line{ 
 
   background-color: #333;
   width: 148px;
   height: 5px;
   align-items: center;
}
.certificate-innerline{ 
  
   background-color: #b61243;
   width: 35px;
   height: 5px;
   align-items: center;
}

.certificate-list{
display: flex;
   justify-content: space-around;
   align-items: center;
   margin: 30px auto;
}

.certificate-left{
   display: flex;
   gap: 10px;
   align-items: center;
   border: 2px solid #333;
   padding-right: 20px;
   max-height: 141px;
   max-width: 420px;
}
.logo-institute{
   background-color: #333;
   background-size: cover;
   display: flex;
   justify-content: center;
   align-items: center;
  
}

.logo-institute img{
   background-color: #333;
    width: 130px;
    height: 141px;
  
 }
 .certificate-description{
   font-size: 13px;
  
   font-weight: 400;
 
  
   
 }
.view-certificate{
   text-decoration: none;
   color: black;
  transition: all 0.3s ease-in-out;
  font-size: 14px;
}

.problem{
   width: 20px;
   height: 20px;
 }
 .view-certificate:hover
{
   display: inline-block;
   transform: translateX(2px);
   color: rgb(150, 28, 28);

}



.skills-container{
   margin: 2rem 5rem;

}

.skills-heading{
   font-family: Arial, Helvetica, sans-serif;
   line-height: 30px;
   font-weight: 400;
   align-items: center;
   align-content: center;
   text-align: center;
   margin-top: 20px;
}
.line{
  
   align-items: center;
   margin: 0 auto;
}

.skills-description{
   display: grid;
   grid-template-columns: auto auto;
   column-gap: 2rem;
   
   align-items: center;
   align-content: center;
}

.skill{
   font-family: Arial, Helvetica, sans-serif;
   font-size: medium;
   margin-top: 5rem;
  

  

}

.skill-name{
   font-family: Arial, Helvetica, sans-serif;
   font-size: medium;
   margin-top: 2rem;
   font-weight: 300;
   margin: 1rem 0;

  

}

.skill-expertise{
   
   background-color: #333;
   width: 100%;
   height: 6px;
   border-radius: 3px

}
.skill-expertise-own{
   
   background-color: aqua;
   width: 50%;
   height: 6px;
   border-radius: 3px

}


.portfolio-container{
   margin:0 3rem;
   text-align: center;
}

.portfolio-list{
margin-top: 5rem;
   display: grid;
   grid-template-columns: 33% 33% 33%;
  

}

.portfolio{
   
   background-color: #555;
   background-position: center;
   background-size: cover;
  
   margin: 1rem;
   color: white;
   padding-bottom: 4px;
   border-radius: 5px;
   transition: all 0.3s ease-in-out;
   flex: 1;
}

.portfolio:hover{
   transform: scale(1.1);
   opacity: 1;
}

.portfolio > img{
   width: 100%; 
}

.portfolio a img{
   width: 2rem;
   height: 2rem;

}
.portfolio a{
 text-decoration: none;
 color: white;
}

/*  contact */

.contact{
   max-width: 100%;
   overflow: hidden;
   color: black;
}
.contact > h1{
   margin-top: 5rem;
 text-align: center;
} 

.contact-info{
   margin-top: 3rem;
   display: flex;
   
   justify-content: space-between;
   align-items: center;
   background-color:  #333;
   color: white;
 
  }

.all-contact{
   background-color: red;
   margin: 3rem auto;
   line-height: 25px;
   flex: 1;
   font-weight: 400;
   background-color: transparent;
   text-align: center;
   font-size:small;
   padding-left: 10px;
 
  }
  .contact-form
  { 
   
   margin: 2rem auto;
   justify-content: space-between;
   align-items: center;
   text-align: center;
   flex: 2;
  }
  form{
   margin: 3rem 1rem;
   line-height: 30px;
   
 
  }

  .submit-info{
   width: 10rem;
   height: 2rem;
   border-radius: 1rem;
   background-color: transparent;
   line-height: 1.5rem;
   color: white;
   font-weight: 400;
   border: 2px solid #666;
   cursor: pointer;
  }

  .input-field{
   background-color: transparent;
   border: 2px solid #666;
   border-radius: 2px;
   width: 70%;
   padding: 5px;
   font-size: 14px;
   font-weight: 400;
   margin-top: 1rem;
  }
 

  .submit-info:hover{
   background-color: aquamarine;

  }

/* footer section */

footer div {
   display: flex;
   justify-content: center;
   gap: 2.5rem;
   background-color: #333;
  
  margin: 1rem 0;
   
  }
footer div a{
   text-decoration: none;
   color: white;
   padding: 1.5rem 1.5rem;
   font-size: medium;
transition: all 0.3s ease-in-out;
   
  }
footer div a:hover{
   background-color: aquamarine;
   font-weight: bold;

   
  }


  @media  screen and (min-width: 1200px) {
     body{
        margin: 0 20rem;
     }
     
  }