/* /////////\\\\\\\\\\\\
  adding responsiveness 
 \\\\\\\\\\\////////////*/

@media (min-width:999.9px) { 
    .owl-carousel{width: 80%;}
}

@media (max-height:600px) { 
    .contact-me div form .message-s{display: none;}
    .contact-me div  form span{display: block;}
}
@media (min-height:600px) { 
    .contact-me div form .message-s{display: block;}
    .contact-me div  form span{display: none;}
}
@media (max-height:650px) { 
    .first .intro h1{font-size: 3em;}
 
}
@media (max-height:500px) { 
    .text-area{height: 250vh;}
    .top2{top: 160vh;}
    .text-area .what-i-do i i{font-size: 1.4em;}
    /* .second {margin:160vh 0 0 0;}
    .second .textblock{height: 130vh;padding:20vh 30px 10vh 30px;} */

}
@media (min-width:768px) { 
    .sixth .review{padding: 0px 30px 30px 30px;}
}

@media (max-width:767.9px) { 
    .third{margin:20vh 0 0 0;}
    .text-area{height: 110vh;left: 0;position: relative;text-align: left;width: 100%;margin: 0vh 0 0vh 0;}
    .text-area .my-bio{padding: 15vh 5vw 0 5vw;text-indent: 10px;}
    .text-area .what-i-do{padding: 28vh 3vw 10vh 5vw;}
    .text-area .what-i-do h2 b{font-size: 1.5em;}
    .text-area .what-i-do i i{font-size: 1.4em;}
    .second{margin:100px 0 0 0;}
    .second .textblock i {font-size: 1.4em;}
    .second .imgblock{margin-top: 0;padding-top: 0;width: 100%;}
    .second .imgblock div{display: block;width: 60%;margin: 30px auto 0 auto;height: 35%;padding: 0;}
    .second div {text-align: center;padding: 10vh auto 0 auto;margin:0 0 10vh 0;}
    .intro{left: 20vw;width: 60%;text-transform: capitalize;}

}
@media (max-width: 500px){
    .sixth .review{width: 90%;}
    .sixth .review .comment{height: 300px;}
    .sixth .review .comment img{width: 100px;height: 100px;}
    .sixth .review .comment div i{font-size: 2em;margin-bottom: 20px;}
    .sixth .review .comment div{left: 0%;}
    
  
    .second .textblock i{margin-top: 2.5vh;}
    .third div div {height: 300px;}
    .third div div img{width: 80%;display:block;height: 60%;margin: 0 auto;}
    .third div div h6{width: 100%;display:block;height: 40%;}
    
}


/* xs-screen */
@media (max-width: 575px){
    .first .intro h1{font-size: 4em;}
    .second .imgblock .pick{padding-top: 10%;}
    .second .imgblock::before {content: '';position: absolute;width: 0;height:80%;border-top: 0px solid;border-left: 2px solid rgba(97,205,50,1);margin: 27% 0 0 43%;}
}

@media (max-height:667px) and (max-width:400px){
    .second .imgblock{margin-bottom: 35vh;}
      .text-area{height: 140vh;}
    .second .textblock {height: 150vh;} 
}

@media (max-height:420px){
    .text-area{height: 160vh;}
    .second .textblock {height: 160vh;} 
}
@media (max-width:340px){
    .first .intro h1{font-size: 3em;}
}