/* for (with background & without dotted background) css is active */ 
.about{
    background-color:  #D38322;
    /* border-radius: 30% 30% 0% 0%; */
    display: flex;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: relative;
    /* overflow: hidden; */
}
.about-left{
    margin: 0rem 3rem;
    margin-top: 0rem;
    margin-left: 3rem;
    }
.resume{
    color: #66bfbf;
    padding: .75rem 2rem;
    border-radius: .75rem;
    cursor:pointer;
    transition: .5s;
    margin-top: 1rem;
    border: 0;
    background: rgb(70, 21, 21);
    font-weight: 700;
    }
.resume:hover{
    background-color: #66bfbf;
    color: rgb(70, 21, 21);
}      
.resume-link{
    text-decoration: none;
}      
.about-left img{
    height: 25rem;
    /* width: auto; */
    border-radius: 2rem;
    /* box-shadow: 0.5rem 0.5rem #000 ; */
    box-shadow: 0 0 0 3px #171D23;
}

.about-right{
    margin: 4rem ;
    margin-right: 2rem;
    margin-left: 1rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
}
.about-right h1{
    /* margin-top: 1rem ; */
    letter-spacing: .09rem;
    margin-bottom: 1rem;
    color: rgb(70, 21, 21);    
    font-size: 3rem;
    display: inline-block;
    width: 28rem;
    border-bottom: 2px solid #171D23;    
    text-align: center;
}
.about-description{
    color: rgb(70, 21, 21);    
    line-height: 1.4;
    margin-top: 1rem;
    font-size: 1.3rem;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-word;
}
/* .about:hover{    
    animation: fadeIn linear 3s;
    -webkit-animation: fadeIn linear 3s;
    -moz-animation: fadeIn linear 3s;
    -o-animation: fadeIn linear 3s;
    -ms-animation: fadeIn linear 3s;
  }
  
  @keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  }
  
  @-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
  } */

  /* .slanted{
      background-color: #D38322;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0%;
      left: 0%;
      transform: skewY(5deg);
      transform-origin: top right;
      z-index: -1;
  } */

  @media (max-width: 1300px ){
    .about-right{
        margin-right: 2rem;
        margin-left: 2rem;
        margin-top: 3rem;
        /* margin-left: 1rem; */
    }  
    .about-right h1{
        margin-top: .2rem ; 
        letter-spacing: 0rem;
          }
    .about-description{
        line-height: 1.2;
        font-size: 1.3rem;
        font-weight: 400;
        text-align: justify;
        text-justify: inter-word;
    }
    .about-left{
        /* margin: 0rem 3rem; */
        margin-top: 0rem;
        margin-right: 1.5rem;
        }
    .about-left img{
        height: 25rem;
        /* width: auto; */
          }

  }
  @media (max-width: 1150px ){
      .about{
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: auto;
          /* height: 100vh; */
            }
      .about-left{
          margin-top: 3rem;
          margin-left: 0;
          margin-right: 0;
          margin-bottom: 2rem;
          /* padding: 0; */
           }
       .about-left img{
           border-radius: 50%;
           box-shadow: 0 0 0 3px #171D23;
           height: 18rem;
           margin-top: 0rem;
           /* margin-bottom: 1rem; */
       }  
       .about-right{
           margin-bottom: 3rem;
           margin-top: 1rem;
           margin-right: 3rem;
           margin-left: 4rem;
           justify-content: center;
           align-items: center;
           /* text-align: center; */
           
       }   
       .about-right h1{
           margin-top: 0rem;
           margin-bottom: 1rem;
       }
       .about-description{
           margin-bottom: 1rem;
           font-size: 1.3rem;
           text-align: justify;
            text-justify: inter-word;
            font-weight: 400;
       }
  }
  @media (max-width: 480px ){
      .about{
          width: auto;
      }
    .about-right h1{
        font-size: 2rem;
        /* font-weight: 700; */
        margin-bottom: 1rem;
        width: 300px;
        text-align: center;
        }
        .about-description{
            /* text-align: center; */
            font-weight: 400;
            /* margin-left: 2rem; */
            text-align: justify;
            text-justify: inter-word;
            font-size: 1.2rem;
        }
        .about-right{
            margin-left: 1rem;
            margin-right: 1rem;
        }
      }

  /* for (with background & without dotted background) css begins here   */ /*(active)*/
/* .about{
    background-color:  #D38322;
    /* border-radius: 30% 30% 0% 0%; */
    display: flex;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: relative;
} */
/* .about-right h1{
    /* margin-top: 1rem ; */
    letter-spacing: .09rem;
    margin-bottom: 1rem;
    color: rgb(70, 21, 21);    
    font-size: 3rem;
    display: inline-block;
    width: 28rem;
    border-bottom: 2px solid #171D23;    
    text-align: center;
} 
*/
/*.about-description{
    color: rgb(70, 21, 21);
    line-height: 1.4;
    margin-top: 1rem;
    font-size: 1.3rem;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-word;
}
*/
/* for (with background & without dotted background) css ends here  */    

/* for (no background & dotted border look) css begins here */
/* hr{
    border: dotted #66bfbf 8px;
    border-bottom: none;
    width: 8%;
    margin: 1.5rem auto;
} */
/* .about{
    /* background-color:  #D38322; */
    /* border-radius: 30% 30% 0% 0%; */
    display: flex;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: relative;
} */
/* .about-right h1{
    /* margin-top: 1rem ; */
    letter-spacing: .09rem;
    margin-bottom: 1rem;
    /* color: rgb(70, 21, 21); */
    color: #66bfbf;
    font-size: 3rem;
    display: inline-block;
    width: 28rem;
    /* border-bottom: 2px solid #171D23; */
    border-bottom: 2px solid #66bfbf;
    text-align: center;
}*/
/*.about-description{
    /* color: rgb(70, 21, 21); */
    color: #66bfbf;
    line-height: 1.4;
    margin-top: 1rem;
    font-size: 1.3rem;
    font-weight: 400;
    text-align: justify;
    text-justify: inter-word;
} 
*/
/* for (no background & dotted border look) css ends here */