/* bars @skills */
@import url('./bar.css');

/* green color's*/
.text-area .what-i-do h2 b, .second .textblock h3 b, .first .pic-area b i, .third b, .forth b, .subtitle, .fifth b, .second div div button:hover, .third div div button:hover, .forth .count, .dollar, .forth .prices .content button:hover, .sixth .review .comment div i, .intro h1 span, .text-area .what-i-do i i, .to-top i {color:rgba(97,205,50,1) !important;}

/* first style*/
.bg-dark{background: rgba(13,13,13,1);}
.first{padding: 0;margin: 0;min-height: 85vh;text-align: center;}
.first div{padding: 0;margin: 0;}
.first .pic-area{height: 80vh;background: url('../images/try3.jpg');background-repeat: no-repeat;background-size: 100% 140%;background-position: bottom left;opacity:.6;}
.intro{background: rgba(13,13,13,1);text-align: center;position: absolute;top: 40vh;left: 25vw;width: 50%;text-transform: capitalize;}
.first .intro h1{}
.first .intro p{text-transform: uppercase;height: 20px;}
.first .intro p::after{content: '';position: absolute;height: 20px;border-left:2px groove;}
.first .pic-area a img{top: 20px;position: absolute;left:5vw;width: 50px;height: 50px;}
.first .pic-area b{position: absolute;padding:3vh 0 7vh 0;margin: 0 auto;left: 0;right: 0;background: linear-gradient(to top,rgba(0,0,0,.91),70%, transparent);bottom:0;}
.first .pic-area b a{text-decoration: none;}
.first .pic-area b a i{margin: 0 3vw;transition: .8s ease;font-size: 1.4em;}
.qualification-list li{width: 100%;}
.qualification-list li p{display: inline;width: 85%;height: 100%;float:right;}
.qualification-list li i{display: inline;width: 10%;min-height: 100%;float:left;}
.text-area{height: 200vh;right: 0;position: absolute;text-align: left;width: 50%;}
.text-area .my-bio{padding: 70vh 5vw 0 5vw;text-indent: 10px;}
.text-area .what-i-do{padding: 30vh 3vw 0 5vw;}
.text-area .what-i-do h2 b{font-size: 1.5em;}
.text-area .what-i-do i {display: inline-block;margin-left: 0vw;text-align: center;}
.text-area .what-i-do i i{margin-left: 0vw;font-size: 2em;}
.text-area .what-i-do i small{display: block;width: 100%;text-align: center;font-size: 1em;}

.top{position: fixed;top: 0;}
.top2{position: relative;top: 0;}


/* second style*/
.second{padding: 0vh 0 40px 0;min-height: 100%;text-align: center;width: 100%;position: relative;margin:10px 0 0vh 0;border-radius: 0 0 0 0;}
.second div {text-align: left;padding: 0vh 5vw 0 7vw;}
.second .textblock{background: rgba(0,0,0,.6);height: 100%;text-align: center;padding:8vh 30px 0 30px;}
.second .textblock h3{font-size: 1.6em;margin-bottom: 2vh;}
.second .textblock h3 b{font-size: 1.4em;}
.second .textblock i {font-size: 1.4em;display: inline-block;margin-right: 20px;text-align: center;margin-top:10px;}
.second .textblock i i{margin-right: 0vw;}
.second .textblock i small{display: block;border-top: 3px solid;}
.second .imgblock div img{display: inline-block;background-size: 100% 100%;background-repeat: no-repeat;width: 100%;height: 60%;padding: 0;}
.second .imgblock div{display: inline-block;text-align: center;margin-top: 0px;padding: 0;}
.second .imgblock div button{outline: none;background: transparent;border: 2px solid;margin:20px 0 0 0px;}
.second .imgblock div button:hover{background: rgba(38,43,43,1);}
.second .imgblock div .img-right-top{width:70%;height: 40%;margin-top: 20%;}
.second .imgblock .pick{height: 50%;margin: 0 auto;display: inline-block;padding:15% 0 0 0;}
.second .imgblock{background: transparent;padding: 10vh 5vw 0 7vw;}
.second .imgblock div {display: inline-block;width: 45%;margin: 10px 1% 0 0;}
.second .imgblock div p{background: -webkit-linear-gradient(to left,transparent,rgba(0,0,0,.9),transparent);background: -ms-linear-gradient(to left,transparent,rgba(0,0,0,.9),transparent);background: -moz-linear-gradient(to left,transparent,rgba(0,0,0,.9),transparent);background: -o-linear-gradient(to left,transparent,rgba(0,0,0,.9),transparent);background: linear-gradient(to left,transparent,rgba(0,0,0,.9),transparent);padding: 10px 20px;width: 100%;height: 30%;}
.second .imgblock::before {content: '';position: absolute;width: 42%;height:37%;border-top: 2px solid;border-left: 2px solid;margin: 20% 0 0 18%;}


/* third style*/
.third b{font-size: 1.5em;}
.third{background: transparent;min-height: 30vh;text-align: center;width: 100%;position: relative;margin:0vh 0 0 0;border-radius: 0 0 0 0;}
.third div {margin: 10vh auto;width: 100%;}
.third div div {padding: 0;margin: 0 auto 40px auto;position: relative;display: block;height: 180px;}
.third div div img{width: 50%;height: 100%;display: inline-block;}
.third div div h6{width: 50%;height: 100%;display: inline-block;padding: 20px;}
.third div div button{outline: none;background: transparent;border: 2px solid;margin:20px auto 0 auto;display: block;}
.third div div button:hover{background: rgba(38,43,43,1);}



/* forth style*/
.forth{padding: 0vh 0 0 0;min-height: 30vh;text-align: center;width: 100%;position: relative;margin:100px 0 0 0;border-radius: 0 0 0 0;}
.forth .count{margin-bottom: 40vh;background: linear-gradient(to left,transparent, rgba(0,0,0,.61),transparent);padding: 10px 0 40px 0;}
.forth .count div div p{font-weight: 600;}
.forth .count div div h3{display: inline-block;font-size: 4em;}


.forth b{font-size: 1.5em;}
.forth .prices{width: 80%;}
.forth .prices .content{display: inline-block;-webkit-clip-path:polygon(100% 100%, 0% 100%, 10% 0%, 90% 0%);-o-clip-path:polygon(100% 100%, 0% 100%, 10% 0%, 90% 0%);-ms-clip-path:polygon(100% 100%, 0% 100%, 10% 0%, 90% 0%);-moz-clip-path:polygon(100% 100%, 0% 100%, 10% 0%, 90% 0%);clip-path:polygon(100% 100%, 0% 100%, 10% 0%, 90% 0%);min-height: 400px;background: rgba(0,0,0,.6);line-height: 30px;padding: 20px 0;}
.forth .prices .mid{-webkit-clip-path:polygon(90% 100%, 10% 100%, 0% 0%, 100% 0%);-o-clip-path:polygon(90% 100%, 10% 100%, 0% 0%, 100% 0%);-moz-clip-path:polygon(90% 100%, 10% 100%, 0% 0%, 100% 0%);-ms-clip-path:polygon(90% 100%, 10% 100%, 0% 0%, 100% 0%);clip-path:polygon(90% 100%, 10% 100%, 0% 0%, 100% 0%);}
.forth .prices .titles{display: block;align-self: center;position: relative;width: 100%;margin-bottom: 40px;}
.subtitle{ }
.name{font-size: 1.3em;}
.amount{margin-top: 20px;}
.number{font-size: 5em;}
.dollar{font-size: 1.5em;}
.period{margin-left: 10px;}
.period::before{content: '';height: 40px;border-left:.1px solid;position: absolute;margin:  0px 0 0 -5px;transform: rotate(30deg);}
.del::before{content: '';width: 30%;border-top:.5px solid;position: absolute;margin:  15px 0 0 -14px;}
.forth .prices .content button{outline: none;background: transparent;border: 2px solid;margin:20px 0 0 0px;}
.forth .prices .content button:hover{background: rgba(38,43,43,1);}
.forth .prices .content .icons{font-size: 3em;}


/* fifth style*/
.fifth b{font-size: 1.5em;}
.fifth{padding: 0vh 10vw;min-height: 70vh;text-align: center;width: 100%;position: relative;margin:200px 0 0 0;border-radius: 0 0 0 0;}
.fifth div {}
.fifth div{background:  rgba(80,180,105,0);}



   /* sixth style*/ 
.sixth b{color:rgba(255,255,255,1);font-size: 1.5em;}
.sixth{padding: 0vh 0 200px 0;min-height: 50vh;text-align: center;width: 100%;position: relative;margin:290px 0 0 0;border-radius: 0 0 0 0;}
.sixth .review{margin: 18vh auto 0 auto;text-align: center;position: relative;width: 80%;}
.sixth .review .comment{background: rgba(54,58,58,1);position: relative;height: 300px;margin:10% 20px 40% 20px;border-radius: 100px 5px 5px 5px;}
.sixth .review .comment img{position: absolute;border-radius: 100%;width: 150px;height: 150px;margin: -20px 0 0 -20px;border: 2px solid rgba(80,180,105,1);left: 0;}
.sixth .review .comment div i{font-size: 4em;padding-bottom: 10px;display: block;}
.sixth .review .comment div p{display: block;}
.sixth .review .comment div{background: #fff;color: black;padding: 10px 20px 30px 20px;border-radius: 100% 0 100% 100%;min-height: 280px;display: block;margin: 50px 0px 0 0px;position: absolute;left: 20%;}
.sixth .titles{display: block;align-self: center;position: absolute;top: -10vh; width: 100%;margin-bottom: 0px;}
.sixth .titles h2{position: absolute;margin: 0 auto;left:0;right: 0;-webkit-text-shadow: 0 0 9px rgba(97,205,50,1);-o-text-shadow: 0 0 9px rgba(97,205,50,1);-ms-text-shadow: 0 0 9px rgba(97,205,50,1);-moz-text-shadow: 0 0 9px rgba(97,205,50,1);text-shadow: 0 0 9px rgba(97,205,50,1);}

.subtitle{font-size: 1.2em;}


/* owl edit*/
.owl-carousel{margin: -40px auto 0 auto;}
.owl-dot span{margin: 0px 18px;-webkit-outline: none;-ms-outline: none;-moz-outline: none;-o-outline: none;outline: none;border: none;box-shadow: none;padding: 0;}
.owl-dot span::after{content: '';width: 20px; height:20px;border-radius: 20%;border:3px solid;position: absolute;margin-left:-10px;}
.owl-dots .active::after{content: '';width: 20px; height:20px;border-radius: 20%;border:10px solid;position: absolute;margin-left:-30px;}
.owl-dot{border: none;outline: none;box-shadow: none;}
.owl-dots .active{border: none;outline: none;box-shadow: none;padding: 0;}




/* contact-me style*/
.contact-me{background: rgba(0,0,0,.6);width: 100%;height: 110vh;margin: 0;padding: 0vh 0 0 0;}
.contact-me div {text-align: left;min-height: 100vh; padding: 8vh 0 14vh 0;}
.contact-me div  form{text-align: center;position:relative;}
.contact-me div  form span{color: grey;padding: 5px;position: absolute;right: 4%;top: 100%;width: 130px;background: rgba(0,0,0,.6);display: none;cursor: pointer;}
.contact-me div  form span i{padding: 2px;width: 10%;display: inline-block;float: left;}
.contact-me div  form span span i{float: inherit;}
.contact-me div  form span span{background: rgba(65,67,69,1);color: white;width: 80%;display: inline-block;margin: -39px -10px 0 0;padding: 6px;}
.contact-me div form .name-s div{display: inline-block;text-align: right;}
.contact-me div form .name-s div i{font-size: 6em;color:grey;text-align: center;padding-top: 2%;width: 100%;}
.contact-me div form .name-s div em{display: block;color:grey;text-align: right;padding-top: 10px;width: 100%;}

.contact-me div form div label{display: block;width: 100%;margin: 10px 0 0 0px;text-align: left;text-transform: capitalize;color: grey;}
.contact-me div form div{display: block;text-align: left;min-height: auto; padding: 0vh 0 0vh 0;margin:0px auto 10px auto;}
.contact-me div form div .name-s{margin: 0 0 0 0;}
.contact-me div form div textarea, .contact-me div form div input{display: block;background: rgba(0,0,0,.0);-webkit-border-width: 2px;-ms-border-width: 2px;-moz-border-width: 2px;-o-border-width: 2px;border-width: 2px;-webkit-border-style: ridge;-o-border-style: ridge;-ms-border-style: ridge;-moz-border-style: ridge;border-style: ridge; -webkit-border-color: grey;-o-border-color: grey;-moz-border-color: grey;-ms-border-color: grey;border-color: grey;text-align:left;padding:10px 20px;outline:none;box-shadow:5px -5px 5px rgba(0,0,0,.0);font-size:1.2em;border-radius:10px;}
.contact-me div form div button{-webkit-border: 1.5px ridge;-o-border: 1.5px ridge;-ms-border: 1.5px ridge;-moz-border: 1.5px ridge;border: 1.5px ridge;width: 35%;transition: width .9s ease-in-out;text-align: center;margin:10px auto 10px auto;border-radius: 10px;letter-spacing: .22em;float: right;padding: 10px;}
.contact-me div form div button:hover{width: 50%;}
.contact-me div form .clo{color: whitesmoke;font-size: 1.6em;margin: 0;left: 40px;position: absolute;cursor: pointer;}



/* to top */
.to-top{left:96vw;bottom: 10vh;padding: 20px 15px;cursor: pointer;border-radius: 100px 0 0 100px;transition: .9s ease-in-out;}
.to-top:hover{left:94vw;}


/* white text color*/
.subtitle, .sixth .titles h2, .sixth .titles, .sixth, .fifth, .forth .prices .content button, .forth, .forth .count div div h3, .third div div button, .third, .second .imgblock, .first, .second .textblock, .second .imgblock div button, .contact-me div form input, .contact-me div form textarea, .first .pic-area b a i:hover {color: #fff;}


/* border's green*/
.first .intro p::after, .second .imgblock div button, .del::before, .period::before, .forth .prices .content button, .third div div button, .second .imgblock::before, .contact-me div form div button, .owl-dot span::after, .owl-dots .active::after, .second .textblock i small {-webkit-border-color:  rgba(97,205,50,1);-o-border-color:  rgba(97,205,50,1);-moz-border-color:  rgba(97,205,50,1);-ms-border-color:  rgba(97,205,50,1);border-color:  rgba(97,205,50,1);}