@import url('https://fonts.googleapis.com/css2?family=Chela+One&family=PT+Serif&display=swap');

 
 
*{
   padding: 0;
   margin: 0;
   border: border-box ;
   font-family: 'PT Serif' , sans-serif;
   text-decoration: none;
}

body{
   overflow-x: hidden;
   width: 100vw;
   height: 100vh;
   
}

/* NAVIGATION BAR */

.navBar {

    display: flex;
    justify-content: space-between;
    height: 5rem;
    padding-top: 0.55rem;
    padding-left: 1rem;
    padding-bottom: 0.55rem;
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 2; 
    box-shadow: 0 1px 28px rgba(128, 128, 128, 0.361); 
   
   

}


.navBar:hover{

    box-shadow: 0 4px 28px rgba(131, 125, 133, 0.452);
}


/* 
 .navBarItems {

      position: fixed; 
    top: 2rem;
    right: 1rem;
} */


/* 
.logo {
     position: fixed; 
  
    top: 1.5rem;
    left: 1rem;

} */ 

.navBar img {

    height: 3.7rem;
}

.logo {

    display: flex;
    align-items: center;
}

.navBarItems {

    display: flex;
    align-items: center;
    margin-right: 1.5rem
}



.navBarItems a {
    
    text-decoration: none;
    margin-left: 2rem;
    color: black;
    text-decoration: solid;
    font-weight: 660;
    font-size: larger;
    border-radius: 9%;
    padding: 0.33rem;
    display: flex;
    text-align: center;
    align-items: center; 
}



.navBarItems a:hover {

    text-decoration: underline;

}

/* ***INTRODUCTION*** */


.heroSection {

    display: flex;
    
    justify-content: center;
    position: relative;
    
    
}


.card {

    text-align: center;
    margin-top: 3rem;
    padding-top: 5rem;
    
    
    
}



.buttons {

    text-decoration: none;
    margin-top: 2rem;
    cursor: pointer;
    
}

.intro p {

    
    text-align: justify;
    padding: 0 8rem 0 8rem ;
}


.introductionHeading{

    display: flex;
    text-align: center;
    justify-content: center;
}

.introduction h2{

    font-size: 2.44rem;
}


.buttons a {

    
    margin-right: 2rem;
    border: 2px solid purple;
    padding: 0.7rem;
    border-radius: 5px;
    box-shadow: 2px 1px rgba(63, 7, 63, 0.313);
  
}



#contactBtn {


    padding-left: 1.5rem;
    padding-right: 1.5rem;
    
}

#contactBtn:hover {

    color: aliceblue;
    background-color: rgb(99, 7, 99);
}



.resume {

    background-color: rgb(116, 12, 116);
    color: aliceblue;
}

.resume:hover{

    color: #fff;
    background-color: rgb(61, 8, 61);
}

  .introductionHeading img{

    height: 10rem;
  }

  .introductionHeading h2{

    margin-bottom: 2rem;
    text-shadow: 1px 2px rgba(102, 98, 104, 0.463);

  }

  .introPfp{

    padding-right: 12rem;
    
  }



.skills {

    display: flex;
    justify-content: center;
    
    margin-top: 4rem;
    
   }

   .skillList {

    margin-right: 9rem;
   }

   .skillList img {

    margin-top: 2rem;
    margin-bottom: 2rem;

   }

   .skillList h3{

    font-weight: 200;

   }

 #keyHeading {

    font-weight: 700;
 }

 /* coding skills */

 .codingSkills {

    width: 40%;
    padding-right: 10rem;
 }
   
 .progressBar1 , .progressBar2 , .progressBar3 , .progressBar4 {

    height: 0.56rem;
    border: 1.57px solid rgb(230, 167, 30);
    border-radius: 20px;
    margin-top: 2rem;
    margin-bottom: 1.22rem;
    background-color: rgb(230, 167, 30);
    /* display: flex; */
    box-shadow: 1px 2px rgba(140, 109, 41, 0.231);
 }

 


  .PB1 {

    border: 1.57px solid rgb(230, 167, 30) ;
    border-radius: 20px;
    width: 95% ;
    height: 0.56rem;
    border-top: none;
    border-left: none;
    background-color:#fff
 } 

 .PB2 {

    border: 1.57px solid rgb(230, 167, 30) ;
    border-radius: 20px;
    width: 85% ;
    height: 0.56rem;
    border-top: none;
    border-left: none;
    background-color:#fff
 }

 .PB3 {

    border: 1.57px solid rgb(230, 167, 30) ;
    border-radius: 20px;
    width: 70% ;
    height: 0.56rem;
    border-top: none;
    border-left: none;
    background-color:#fff
 }

 .PB4 {

    border: 1.57px solid rgb(230, 167, 30) ;
    border-radius: 20px;
    width: 65% ;
    height: 0.56rem;
    border-top: none;
    border-left: none;
    background-color:#fff
 }

 

 .codingSkills h3{

    font-weight: 200; 
 }

 #codeHeading {

    font-weight:700;
    margin-bottom: 2rem
 } 


 /* ***CERTIFICATES**** */


.certificates{

    background-color: rgba(209, 211, 219, 0.733);
    width: 100%;
    background-color: #f1f1f1;
    
    
 }

 .certDiv2{

   
    background-color : #f1f1f1; 
    
    
 }
 .Swiper {

    padding: 3rem 9rem 3rem 9rem;
    
    display: flex;
    flex-direction: column;
    
 }

 .certHeading {

    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0 1rem 0;
 }

 .swiper-wrapper {

    display: flex;
    
    
 }

 .swiper-slide-cert1  , .swiper-slide-cert3 {

margin: 0.5rem 0rem 0.5rem 0rem;
background-color: #fff;
padding: 2.33rem;
border-radius: 5px;
width: 12rem;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
flex-direction: column;

 }


 .swiper-slide-cert2 {

 margin: 0.5rem 1.22rem 0.5rem 1.22rem;
background-color: #fff;
padding: 2.33rem;
border-radius: 5px;
width: 12rem;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
flex-direction: column;
 }

 .certDate {
    display: flex;
    margin-bottom: 1rem;
    margin-top: 1rem;
 }

 .certContent {

    font-size: small;
 }

 .swiper-slide-cert1 h2 , .swiper-slide-cert2 h2
 ,.swiper-slide-cert3 h2 
    {

    font-size: medium;
    
 }

 
/* *******PORTFOLIO******* */

.portfolio{
  display: flex;
  justify-content: center;
}

.portWrapper {

  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 15rem 0 15rem;
  margin: 0 0 3rem 0;
}

.portWrapper hr {

  display: inline-block;
  height: 0.002px;
  color: rgba(0, 0, 0, 0.016);

}

.feature {

  display: flex;
  justify-content: space-between;
  margin: 2rem 0 2rem 0;
  text-decoration: none;
  
  
}

.feature h3{

  font-weight: 400;

}

.feature a {

  font-size: 0.88rem;
  text-decoration: none;
  color: black;
  margin-right: 4rem;
}

.port1 , .port2 , .port3{
  display: flex;
  align-items:start;
  margin: 1rem 0 2rem 0;
  
  }

  

  .portWrapper h2 {

    font-size: 1.88rem;
    color: #142850;
  }

.portImg {

  margin-right: 1.55rem;
display: inline-block;
border-radius: 10px;
}

.portImg img{ 

  display: inline-block;
  border-radius: 10px;
}

.portDate {

  border: 1px solid #142850;
  display: inline-block;
  margin: 1rem 3rem 1rem 0 ;
  padding: 0.22rem 1.55rem 0.22rem 1.55rem;
  color: #fff;
  background-color: #142850;
  border-radius: 20px;
  font-weight: 700;
  
}



.portDescription {

  margin-bottom: 1.5rem;
}

/* ***RECENT POSTS*** */

.recent {

  width: 100%;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
}

.recentWrapper {

  width: 50%;
  margin: 1rem 0 1rem 0;
}

.recentHead{
  display: flex;
  justify-content: space-between;
}


.recentCol {

  display: flex;
  justify-content: space-evenly;
 
}

.recent1 , .recent2 {

  border: 2px solid #fff;
  margin: 1rem 1rem 0 1rem;
  padding: 1rem 3rem 1rem 3rem;
  background-color: #fff;
}

.recenth2 , .recentDate , .recentInfo {


  margin-bottom: 0.7rem;
}



/* PortContent */


.portfolioSection {

  position: relative;
  top: 140px;
} 

.portDiv  h1 {

font-size: 2.33rem;


}

.portcard {

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: #f1f1f1;
  padding: 3rem ;
  
  

 
}

.portcard img {

  
  display: block;
  margin-bottom: 2.33rem;
}

.portcard .col-1 {

  margin-bottom: 9rem;
  position: relative;
}


/* BLOG DETAILS */

.blog-details {

  position: relative;
  top: 140px;
} 

.blogDiv{

  margin: 0 12rem 3rem 12rem;
  display: flex;
  flex-direction: column;
  align-items:start;
}


.blogDiv h1 {

  margin: 2.33rem 0;
  font-size: 2.55rem;

}

.blogDiv h3{

  margin-bottom: 2.33rem;
  font-size: 1.66rem;
  font-weight: 200;
}

.blogDetails {

  margin-top: 6rem;
}


/* Form */


.formSection {

  position: relative;
  top: 170px;
  
}

.formSection h1{

  margin-bottom: 2rem;
  font-size: 2rem;
  margin-left: 1rem;

}
.formDiv {

  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 1rem;
}

.formDiv input , textarea {

  outline: 0;
  border: 0;
  padding: 1rem 13rem;
  margin: 1rem 0;
  border: 0.77px solid rgba(0, 0, 0, 0.29);
  border-radius: 10px;

}

.formBtn button {

  padding: 1rem 3rem;
  background-color: purple;
  color: #fff;
  font-size: 1rem;
  border-radius: 10px;
}





/* PortContent */


.portfolioSection {

  position: relative;
  top: 140px;
} 

.portDiv  h1 {

font-size: 2.33rem;
margin:  2.33rem;

}

.portcard {

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background-color: #f1f1f1;
  padding: 3rem 7rem;
  
  

 
}

.portcard img {

  
  display: block;
  margin-bottom: 2.33rem;
}

.portcard .col-1 {

  margin-bottom: 9rem;
  position: relative;
}


/* PORTFOLIO CONTENT */

.portfolio-details {

  position: relative;
  top: 140px;
}


.portDiv2{

  margin: 0 12rem 3rem 12rem;
  display: flex;
  flex-direction: column;
  align-items:start;
}

.portDiv h1 {
  margin: 2.33rem 0;
  font-size: 2.55rem;
}


/* ****FOOTER***** */



.footerSection {

  margin-top: 230px;
} 


.footerCol {
   padding: 50px 0;
   text-align: center;
 }
 .socialCol li {
   display: inline-block;
 }
 .socialCol li + li {
   padding-left: 35px;
 }
 .socialCol img {
   max-width: 30px;
   max-height: 30px;
   -o-object-fit: contain;
   object-fit: contain;
 }
 .copyrightCol {
     padding: 20px 0 0;
   font-size: 14px;
 }
 .copyrightCol p {
     margin: 0;
 }