a.nav-link{
    color: black;
}
h4, .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .headerText0{
    animation-name: moveInRight;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  }
  .headerText1 {
  animation-name: moveInUp;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  }
  .headerText2{
    animation-name: moveInUp;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    }
  .headerText3{
      animation-name: moveInUp;
      animation-duration: 3s;
      animation-timing-function: ease-out;
      }
      .headerButton{
        animation-name: buttonShake;
        animation-duration: 3.5s;
        animation-timing-function: ease-out;
      }
  @media screen and  (min-width :1000px){
    h4{
      font-size: medium;
    }
  }
  @media screen and  (min-width :851px){
    h4{
      font-size: smaller ;
    }
  }
  @media screen and  (max-width :850px){
    header.masthead{
      background-size: cover;
      background-origin: content-box;

      /* transform: scale(0.75,0.75); */
     
    }    
    .pc-words{
      margin-top: 50%;
    }
    h4{
      font-size: small;
      
    }
    .headerButton{
      margin-top: 20%;
    }
  }
  @keyframes moveInLeft {
    0%{
      opacity:0;
      transform: translateX(-90%);
    }
     
    100%{
      opacity: 1;
      transform: translate(0);
    }
  }
  @keyframes moveInRight {
    0%{
      opacity:0;
      transform: translateX(90%);
    }
     
    100%{
      opacity: 1;
      transform: translate(0);
    }
  }
  @keyframes moveInUp {
    0%{
      opacity:0;
      transform: translateY(97%)
    }
     50%{
      opacity:0.05;
      transform: translateY(90%);
    }
    75%{
      opacity:0.10;
      transform: translateY(85%);
    }  
    100%{
      opacity: 1;
      transform: translate(0);
    }
  }
  @keyframes buttonShake {
    0%{
      opacity:0;
      transform: translateY(97%)
    }
     50%{
      opacity:0.05;
      transform: translateY(-50%);
    }
    75%{
      opacity:0.10;
      transform: translateY(85%);
    }  
    100%{
      opacity: 1;
      transform: translate(0);
    }
  }
  .page-section{
    padding: 15rem 0;
    clip-path: polygon(0 0,100% 0, 100% 85%, 0 100%);
  }
  
  .learnMore:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  }
  
  h5, .h5 {
    font-size: 1.25rem;
  }
  
  h6, .h6 {
    font-size: 1rem;
  }
  
  p {
    margin-top: 0;
    margin-bottom: 1rem;
  }
  .port-links{
  color: #05386B;
    text-align: center;
    display: flex;
    align-self: center;
    justify-content: center;
    padding: 20px;
    font-size: large;
    font-family: inherit;
  
    
  }
  .port-links:hover{
    cursor: pointer;
    color: darkgreen;
  }
  
  .bi-linkedin{
    cursor: pointer;
  }
  .bi-file-pdf{
    cursor: pointer;
  }
  .portfolio-header{
    
    
    justify-self: center;
    align-self: center;
    align-content: center;
  }
  .code{
    font-size: xx-large;
    font-weight: 900;
  }
  .logoimg{
    align-self: center;
  }
  .img-fluid{
    background-size: cover;
    background-image: cover;
    width: 100%;
    
  }
 
  .box-port{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 45rem;
    background-color: white;
   
  }
  
.boxes{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: space-around;
  flex-wrap: wrap;
  gap:3rem 3rem
  
}
.box-port:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  transform: scale(1.1);
}
.services-box:hover{
  transform: scale(1.2);
  cursor: pointer;

}