*{
    margin: 0;
    padding: 0;

}

body {
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
    
}
html{
    scroll-behavior: smooth;
    transition: 5s 4s ease;
}

.main{
    width: 100vw;
    height: auto;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
.imgbg{
   
    
    width: 100vw;
    
    background: linear-gradient(#00d7bb, rgba(66, 187, 136, 0.6)),
    url(../style/img/header-bg.jpg) no-repeat;
    background-size: cover;
    height: auto;   
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.home{
    width: 100%;
    height: 100vh;
    position: relative;
}
.home--content{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 30vh;
    left: 20vw;
    font-size: 55px;
    font-weight: 200;
    color: aliceblue;
    justify-content: flex-start;
    font-family: sans-serif;
    animation: fade-down 0.5s 0.4s backwards;
}
.about{
    width: 100%;
    height: auto;
    background-color: #22252c;
}
.about--left{
        width: 50%;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        padding-top: 60px;
       
        

}
    .about--img{
        /* background: linear-gradient(to right, rgb(16, 187, 122), rgb(17, 179, 185));
        padding: 3px; */
        position: relative;
        margin: 40px 0px;
        
    
    }
    .about--img>img{
        width: 400px;
        height: 400px;
        z-index:1;
        position: relative;
        margin: auto;
    }
    .border--img{
        width: 400px;
        height: 400px;
        border: 5px solid #00d7bb;
        position: absolute;
        z-index:0;
        top: -60px;
        right: -60px;
    
    }

.about--left>button{
    background: -webkit-linear-gradient(left, #00f298, #07f7f7);
    padding: 19px;
    box-shadow: rgba(46, 77, 43, 0.56) 0px 22px 70px 4px;
    border: none;
    margin-top: 15px;
}
.about--left>button>a{
    color: white;
    text-decoration: none;
    font-size: 20px;
    
}
.about--left>button>a>i{
    padding-right: 3px ;
}
.about--right{
    width: 50%;
    float: right;
    height: 70%;
    color: aliceblue;
    padding-top: 60px;
}
.about--right--content{
    padding: 100px;
}
.about--right--content>h2{
    width: 50%;
    font-size: 40px;    
    margin: 20px 0px;
    background: -webkit-linear-gradient(left, #00f298, #07f7f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.about--right--content>h3{
    
    color: #00d7bb;
    display: flex;
    flex-direction: row;
    margin: 20px 2px;
}
.about--right--content>h3>p{
    color: aliceblue;
    padding-left: 5px;
}
.interest{
    width: 100%;
    clear: both;
    height: 30%;
  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.interest>.title{
    color: #00d7bb;
    font-size: 30px;
    width: 50vw;
    margin-bottom: 20px;
}
.interest--content{
    display: flex;
    width: 50vw;
    flex-direction: row;
    justify-content: space-between;
    margin: auto;

}
.interest--content>.item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.interest--content>.item:hover >div {
    background-color: #00f298;
    
}
.interest--content>.item:hover >div>i{
    color: aliceblue;
}
.interest--content>.item:hover >p{
    color: aliceblue;
    animation: keolen 0.5s ease ;
}
.interest--content>.item>div{
    width: 70px;
    height: 70px;
    border:1px solid #00d7bb;
    border-radius: 50%;
    margin: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.interest--content>.item>div>i{
    font-size: 30px;
    color: #00d7bb ;
}
.interest--content>.item>p{
    color: aliceblue;
    font-size: 25px;
    transform: translateY(30px);
}
@keyframes keolen {
    from {
        transform: translateY(30px);
    }
    to {
        transform: translateY(0px);
    }
    
}


.education{
   background-color: rgb(49, 55, 65);
   width: 100%;
   height: 200vh;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   
}
.education>h3{
    font-size: 40px;
    background: -webkit-linear-gradient(left, #00f298, #07f7f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 60px;
    margin-top: 30px;
    

}
.education-icon{
    width: 70px;
    height: 70px;
    border: 1px solid #00d7bb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
}
.education-icon>i{
    color: #00d7bb;
    font-size: 40px;
}
.education-bar{
    width: 3px;
    height: 80%;
    background-color: #00d7bb;
}
.education-content-box{
    display: flex;
    flex-direction: row;
    height: auto;
    align-items: center;
    justify-content: center;
    margin: 100px 0px;

}
.education-content{
    width: 55vw;
    height: auto;
    display: flex;
    position: absolute;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    bottom: 70px;
    top: 220px;
    

}
.education-content-box .left{
   

    width: 47%;
    color: azure;
    text-align: center;
}
.education-content-box .mid{
    width: 6%;
    margin: 0px 15px;
    display: flex;
    
    justify-content: center;
    align-items: center;

    background-color: rgb(49, 55, 65);
    

}
.education-content-box .mid >div{
    width: 35px;
    height: 35px;
    border: 1px solid #00d7bb;
    color: #00d7bb;
    border-radius: 50%;
    
   line-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   
    
}
.education-content .mid >div>h5{
    height: 10px;
    width: 10px;
    background-color:#00d7bb ;
    border-radius: 50%;
 
}

.education-content .right{
    width: 47%;
    color: azure;
    text-align: center;

}
.education-content .right>h4{
    color: #00d7bb;
    font-size: 27px;
    font-weight: 700;
    text-transform: uppercase;
}
.education-content .left>h4{
    color: #00d7bb;
    font-size: 27px;
    font-weight: 700;
    text-transform: uppercase;
}
.education-end{
  
    color: #00d7bb;
    width: 30px;
    height: 30px;
    background-color: #00d7bb;
    border: 1px solid;
    border-radius: 50%;
}
.skills{
    height: auto;
    width: 100%;
    background-color: #22252c;
    padding: 100px 0px;
    display: flex;
    flex-direction: column; 
    align-items: center;
    
}
.skills>h3{
    
    text-align: center;
    padding-bottom: 100px;
    background: -webkit-linear-gradient(left, #00f298, #07f7f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
    width: 25vw;
}
.skills-bar{
    background-color: #323741;
    width: 100%;
}
.skills-bar-content{
    display: flex;
    flex-wrap: wrap;
    width: 60vw;
    margin: auto;
    padding-bottom: 50px;
    
}
.skills-bar-content-item{
    width: 50%;
    height: 50px;
    padding: 50px 50PX;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.skills-bar-content-item>span{
    color: aliceblue;
}
.skills-bar-content-item>.bar-chas>.bar-cha{
    width: 100%;
    height: 100%;
    background-color: #141d1c;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
 


}
.skills-bar-content-item>.bar-chas>.bar-cha>.bar-con{
    background-color: #00d7bb;
    width: 80%;
    position: relative;
    height: 4px;
    z-index: 2;
    transform: width 2s ease-out;
}
.skills-bar-content-item>.bar-chas>.bar-cha>.end{
    width: 10px;
    height: 10px;
    background-color: #00d7bb;
    border-radius: 50%;
    position: relative;
    
}
.skills-bar-content-item>.bar-chas{
    width: 100%;
    min-height: 4px;
    background-color: #141d1c;
    position: relative;
    margin-top: 5PX;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.skills-bar-content-item>.bar-chas>.bar-cha>.end>.count{
    height: 20px;
    width: 30px;
    position: absolute;
    top: -30px;
    left: -7px;
    color: antiquewhite;
    
    
}
.skills1{
    background-color: #141d1c;
    width: 100%;
    height: 80vh;
    padding-top: 200px;
    padding-bottom: 200px;
    display: flex;
    justify-content: center;
}
.skills1-content{
    width: 65vw;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

}
.skills1-content>.box{
    box-sizing: border-box;
    width:calc(100%/3);
    height:calc(100%/1.3) ;
    padding: 20px;
    background-color: #323741;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
   
    
    
}

.skills1-content>.boxmid{
    height:calc((100%/1.2)) ;

}
.skills1-content>.box>h1{
    padding: 20px 0px;
    
}
.skills1-content>.box>h2{
    padding: 20px 0px;
    color: #00d7bb;
}
.skills1-content>.box>p{
    padding-bottom: 50px;
    font-size: 25px;
    color: aliceblue;
}

.mywork{
    width: 100%;
    height: auto;
    background-color: #323741;
   
}
.myworktitle{
    text-align: center;
    font-size: 40px;
    background: -webkit-linear-gradient( left, #00f298, #07f7f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    height: 20vh;
    line-height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;

}
.myworktitle>h5{
    line-height: 100%;
    background: -webkit-linear-gradient( left, #00f298, #07f7f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}
.myworkcontent{
    background-image: linear-gradient(rgba(0, 255, 197, 0.5), rgba(0, 255, 197, 0.5)),
    url(../style/img/port-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
   
}
.myworkcontent>.content{
    width: 60vw;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-top: 50px;
    height: auto;
  
    
}
.myworkcontent>.content>.item{
    box-sizing: border-box;
    width: 20vw;
    height: 20vw;
    padding: 18px;
    position: relative;

}
.myworkcontent>.content>.item>img{
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 100%;
    width: 100%;
    height: 100%;
   

}
.myworkcontent>button{
    background-color: #323741;
    padding: 20px 50px;
    border: 1px solid #323741;
    margin-top: 40px;
    margin-bottom: 100px;
    
}
.myworkcontent>button>a{
    text-decoration: none;
    color: #00d7bb;
}
.myworkcontent>button:hover{
    background-color: transparent;
    color: #141d1c;
}
.myworkcontent>.content>.item>.item-opa{
    position: absolute;
    z-index: 3;
    background-color: rgb(255, 255, 255);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    border: 10px solid rgb(194, 177, 177);
    opacity: 0;
    
}
.myworkcontent>.content>.item>.item-opa>.link{
    width: 100%;
    height: 70%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.myworkcontent>.content>.item>.item-opa>.link>div{
    width: 35px;
    height: 35px;
    border: 1px solid #00d7bb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    
}
.myworkcontent>.content>.item>.item-opa>.link>div>a{
    text-decoration: none;
    color: #00d7bb;
}
.myworkcontent>.content>.item:hover>.item-opa{
    background-color: rgb(255, 255, 255);
    transform: scale(1);
    transition: 1s ease ;
    opacity: 0.8;
}
.myworkcontent>.content>.item >.item-opa>.ten>h1{
    font-size: 25px;
    padding-left: 10px;
    opacity: 1;

}
.myworkcontent>.content>.item >.item-opa>.ten>h2{
    font-size: 19px;
    color: #00d7bb;
    padding-left: 10px;
    opacity: 1;
}


.mywork-modal{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;

}
.mywork-modal-content{
    position: absolute;
    width: 40vw;
    height: 40vw;
    
    
}

.mywork-modal-content>img{
    width: 100%;
    height: 100%;
 
    
   
}
.mywork-modal-content>span{
    right: 0;
    position: absolute;
    font-size: 20px;
    top: -20px;
    color: aliceblue;
}


.contact{
    width: 100%;
    height: auto;
    background-color: #22252c;
    display: flex;
    justify-content: center;
}
.contact-container{
    width: 50vw;
    height: auto;
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 100px; 
    
    
}
.contact-title{
    width: 100%;
    font-size: 40PX;
    background: -webkit-linear-gradient(left, #00f298, #07f7f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-weight:700;
}
.contact-name{
    width: 50%;
    float: left;
    padding: 20px;  
    box-sizing: border-box;    

}
.contact-name>input{
    width: 100%;
}
.contact-email{
    width: 50%;
    padding: 20px;     
    box-sizing: border-box;  
        
    
}
.contact-email>input{
    width: 100%;
    background-color: transparent;
    color: aliceblue;
    height: 50px;
    border: none;
    border-bottom: 1px solid rgb(100, 104, 100)  ;
    outline: none;
}
.contact-email>input:focus{
    border-bottom: 1px solid #00d7bb  ;
    border-radius: 1px;
}
.contact-name>input{
    width: 100%;
    background-color: transparent;
    color: aliceblue;
    height: 50px;
    border: none;
    border-bottom: 1px solid rgb(100, 104, 100)  ;
    outline: none;
    
}
.contact-name>input:focus{
    border-bottom: 1px solid #00d7bb  ;
    border-radius: 1px;
}
.contact-message{   
    width: 100%;
    clear: both;
    padding: 20px;     
    box-sizing: border-box;  
    

}

.contact-message>input{
    width: 100%;
    background-color: transparent;
    color: aliceblue;
    height: 200px;

    outline: none;
    border: none;
    border-bottom: 1px solid rgb(100, 104, 100)  ;
}
.contact-message>input:focus{
    border-bottom: 1px solid #00d7bb  ;
    border-radius: 1px;
}
.contact-container>button{
    padding: 20px 50px;
    background-color: transparent;
    color: #05c7ae;
    border: 1px solid #05c7ae   ;
}
.contact-container>button:hover{
    background-color: #05c7ae;
    color: #141d1c;
    box-shadow: rgba(46, 77, 43, 0.56) 0px 22px 70px 4px;
    transition: 1s ease;

}
.footer{
    background-color: #141d1c;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}
.footer-icon{
    width: 23vw;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: space-between;
    margin: 50px 0px;
    
    

    
    
}
.footer-icon>a{
    height: 40px;
    width: 40px;
    text-decoration: none;
    background-color: #323741;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #05c7ae;
    border-radius: 50%;
    
}
.footer>h4{
    width: 100%;
    color: #00d7bb;
    font-size: 13px;
    text-align: center;
    width: 50vw;
    border-top:1px solid rgb(100, 104, 100) ;
    padding-top: 30px;
    padding-bottom: 30px;

}
.footer-icon>a:hover{
    background-color: #05c7ae;
    color: #141d1c;
    transition: 1s ease;
}


.hire{
    width: 100%;
    background-color:#02cfb4 ;
    display: flex   ;
    justify-content: center;

}
.hire-content{
    width: 50vw;
    display: flex;
    flex-direction: row;
    padding: 70px 0px;
    justify-content: center;
    align-items: center;
    margin: auto;
    background-color:#02cfb4 ;

}
.hire-content>span{
    font-size: 60px;
}
.hire-content>button{
    border: 1px solid black;
    background-color: black;
    padding: 10px 60px;
    color: #02cfb4;

}
.hire-content>button:hover{
    background-color: #00d7bb;
    color: black;
    border: 1px solid black;

}
.hire-content>.hire-content-word{
    margin: 0px 25px;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}
.hire-content>.hire-content-word>h3{
    font-size: 37px;
    font-weight: 700;
    color: #25292f;
}


.slider{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #141d1c;
    flex-direction: column;

}
.slider>h1{
    background: -webkit-linear-gradient(left, #00f298, #07f7f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 50px 0px;
    font-size: 50px;

}
.slider-container{
    width: 45vw;
    
}
.slider>.slider-container>.owl-carousel>.owl-stage-outer>.owl-stage>.owl-item>.item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}
.slider>.slider-container>.owl-carousel>.owl-stage-outer>.owl-stage>.owl-item>.item>.avatar{
    height: 130px;
    width: 130px;
    background: url(../style/img/about-img.jpg) ;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;

}
.slider>.slider-container>.owl-carousel>.owl-stage-outer>.owl-stage>.owl-item>.item>.avatar>img{
    width: 100%;
    height: auto;
}
.slider>.slider-container>.owl-carousel>.owl-stage-outer>.owl-stage>.owl-item>.item>.name{
    background: -webkit-linear-gradient(left, #00f298, #07f7f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 20px 0px;
}
.slider>.slider-container>.owl-carousel>.owl-stage-outer>.owl-stage>.owl-item>.item>.content{
    color: aliceblue;
    text-align: center;
    margin-bottom: 30px;
    font-size: 19px;
}

.menu{
    width: 100%;
    height: 7vh;
    background-color: transparent;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: -webkit-linear-gradient(left, #00f298, #07f7f7);


}
.menu>.menu-container{
    width: 60vw;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu>.menu-container>.icon{
    position: absolute;
    left: 30px;
    font-size: 20px;

}
.menu>.menu-container>.icon>i{
    padding: 4px;
    color: aliceblue;
}
.menu>.menu-container>.sub-menu{
    position: absolute;
    right: 30px;
    font-size: 30px;
}
.menu>.menu-container>.sub-menu>a{
    text-decoration: none;
    color: aliceblue;
}
.menu-modal{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: none;

}
.menu-modal>h3>a{
    font-size: 50px;
    color: aliceblue;
    text-decoration: none;

}
.menu-modal>h3{
    margin: 20px 0px;

}
.menu-modal>span{
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 50px;
    color: aliceblue;
}
.scroll{
    width: 40px;
    height: 40px;
    

    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 5;
    overflow: hidden;
    


}
.scroll>.scroll-content>a{
    text-decoration: none;
    transition: 1s ease;
}
.scroll>.scroll-content>a>i{
    color: aliceblue;
    font-size: 20px;

}
.scroll>.scroll-content{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: -webkit-linear-gradient(top, #00f298, #07f7f7);
    transform: translateY(40px);
}


@keyframes fade-down{
    from {
        transform: translateY(-30px) scale(0.95) ;
        opacity: 0.8;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}
.fade-downh{
    animation: fade-down ease 1s 0.5s forwards;
    animation-timeline: view();
    
}



/* 
scrollbar */
::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #00d7bb; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: -webkit-linear-gradient(left, #00f298, #07f7f7);
    transition: 10s ease;
  }
  /* scrollbar ennd */





/* 
start filter product
*/
.button-group{
    width: 30%;
    
    text-align: center;
    color: #141d1c;
    padding: 20px 0px;
}
.button-group>.button{
    color: #141d1c;
    font-size: 30px;
    margin: 0px 10px;
    
}
.button-group>.button:hover{
    background-color: #323741;
    color: #00f298;
}




/* 
end filter product
*/



/* Giảm khoảng cách di chuyển cho hiệu ứng fade-up của AOS */
[data-aos="fade-ups"] {
    opacity: 0;
    transition-property: transform, opacity;
    &.aos-animate {
      opacity: 1;
    }
  
    @media screen and (min-width: 768px) {
      transform: translateY(30px);
  
      &.aos-animate {
        transform: translateY(0);
      }
    }
  }


  [data-aos="fade-downs"] {
    opacity: 0;
    transition-property: transform, opacity;
    &.aos-animate {
      opacity: 1;
    }
  
    @media screen and (min-width: 768px) {
      transform: translateY(-30px);
  
      &.aos-animate {
        transform: translateY(0);
      }
    }
  }
  [data-aos="fade-rights"] {
    opacity: 0;
    transition-property: transform, opacity;
    &.aos-animate {
      opacity: 1;
    }
  
    @media screen and (min-width: 768px) {
      transform: translateX(30px);
  
      &.aos-animate {
        transform: translateX(0);
      }
    }
  }
  [data-aos="fade-lefts"] {
    opacity: 0;
    transition-property: transform, opacity;
    &.aos-animate {
      opacity: 1;
    }
  
    @media screen and (min-width: 768px) {
      transform: translateX(-30px);
  
      &.aos-animate {
        transform: translateX(0);
      }
    }
  }


@keyframes animates {
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}


[data-aos="fade-leftss"] {
    opacity: 0;
    transition-property: transform, opacity;
    &.aos-animate {
      opacity: 1;
      animation: animates 2s forwards;
      
    }
  
    @media screen and (min-width: 768px) {
      transform: translateX(0px);
  
      &.aos-animate {
        transform: translateX(0);
      }
    }
  }







/* reponsive */


/* mobile */
@media  only screen and (max-width:46.1875rem) {
    /* mennu */
    .menu>.menu-container{
        width: 100%;
       
    }
    /* about */
    .border--img{
        display: none;
    
    }
    .about--img>img{
        width: 90vw;
        height: auto;
    }

    .about--left{
        width: 100%;
    }
    .about--right{
        width: 100%;
    }
    .about--right--content{
        padding: 10px;
    }
    .interest{
     
        height: 80%;
      
    }
    .interest>.title{
      
        width: 90vw;

    }
    .interest--content{
        
        width: 90vw;
        flex-wrap: wrap ;
    
    }   
    .interest--content>.item{
        width: 50%;
    }
    .about--right--content>h2{
        width: 90%;
       
    }
    /* education */
    .education-content-box{
        
        margin: 0px 0px;
    
    }
    .education-content{
        width: 96%;

    
    }
    .education-content-box .mid >div{
        width: 19px;
        height: 19px;
        
        
    }
    .education-content .mid >div>h5{
        height: 6px;
        width: 6px;
       
     
    }
    .education-content .right>h4{
        
        font-size: 22px;
        font-weight: 500;
       
    }
    .education-content .left>h4{
       
        font-size: 22px;
        font-weight: 500;
        
    }
    .education-content .right>p{
        
        font-size: 12px;
     
       
    }
    .education-content .left>p{
       
        font-size: 12px;
     
        
    }
    /* skills */
    .skills>h3{
    
        
        width: 100% ;
        font-size: 28px;
    }
    .skills-bar-content{
        width: 100%;
        
    }
    .skills-bar-content-item{
        width: 100%;
    }
       /* skill1 */
       .skills1{
        background-color: #141d1c;
        width: 100%;
        height: auto;
       
    }
    .skills1-content{
        width: 100vw;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0px 30px;
        
    
    }
    .skills1-content>.box{
        width: 100%;
        height: 30vh;
        display: flex;
        justify-content: flex-start;
    }
    .skills1-content>.box>h1{
        width: 100%;
        font-size: 35px;
        
    }
    .skills1-content>.box>h2{
        width: 100%;
    }
    .skills1-content>.box>p{
        font-size: 15px;
    }
    .skills1-content>.boxmid{
        height:auto ;
    
    }
    .skills1-content>.box{
        height: auto;
       
        
        
    }

/* mywordcotent */
.myworkcontent>.content{
    width: 92vw;
    
  
    
}
.myworkcontent>.content>.item:active>.item-opa{
    background-color: rgb(255, 255, 255);
    transform: scale(1);
    transition: 1s ease ;
    opacity: 0.8;
}
.myworkcontent>.content>.item {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0px;
    margin-bottom: 6vw;
}
.myworkcontent>.content>.item>.item-opa{
  
    margin: 0px;
    box-sizing: border-box;

    
}
.myworkcontent>.content>.item:focus>.item-opa{
    background-color: rgb(255, 255, 255);
    transform: scale(1);
    transition: 1s ease ;
    opacity: 0.8;
}


.mywork-modal-content{
    position: absolute;
    width: 90%;
    height: auto;
    
    
}

/* slider */
.slider-container{
    width: 100vw;
    
}
.slider>h1{
    text-align: center;
    font-size: 29px;

}
.slider>.slider-container>.owl-carousel>.owl-stage-outer>.owl-stage>.owl-item>.item>.content{
    padding: 0px 10px;
}

    /* hire */
    .hire{
    
        display: flex;
      
    
    }
    .hire-content{
        width: 86vw;
        margin: 0px;
        flex-direction: column ;
        
      
    }
    .hire-content>.hire-content-word>h3{
        font-size: 25px;
      
    }
    .hire-content>button{
        margin-top: 20px;
    
    }
    .hire-content>.hire-content-word>p{
        margin: 5px 0px;
        font-size: 15px;
        color: #22252c;
    }

/* contact */
.contact-container{
    width: 100%;
    padding: 0px;
    margin: 20px 0px;
    
    
}
.contact-title{
    width: 100%;
    font-size: 29px ;
   
}

.contact-name{
    width: 100%;
    padding: 20px 12px;  
  

}
.contact-name>input{
    width: 100%;
}
.contact-email{

    padding: 20px 12px;     
    width: 100%;
        
    
}
/* footer */
.footer-icon{
    width: 70vw;
  
    margin: 20px 0px 50px 0px;
    

    
    
}

.footer>h4{
    width: 91%;
    

}


  
    
}


/* tablet */
@media only screen and (min-width:46.1875rem)and (max-width:63.975rem){
    /* about */
    .about{
        display: flex;
        flex-direction: column;
    }
    .about--left{
        width: 60%;
        margin-left: 30px;
       
        

    }
    .about--right{
        width: 100%;
       
    }
    .interest{
     
        height: 70%;
      
    }
    .interest>.title{
      
        width: 90vw;

    }
    .interest--content{
        
        width: 90vw;
        flex-wrap: wrap ;
    
    }
    .interest--content>.item{
        width: 30%;
    }
    /* education */

    /* skill */
    .skills-bar-content{
       
        width:100%;
        margin: 0;
       
        
    }
    /* skill1 */
    .skills1{
        background-color: #141d1c;
        width: 100%;
        height: auto;
       
    }
    .skills1-content{
        width: 100vw;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 0px 30px;
        
    
    }
    .skills1-content>.box{
        width: 100%;
        height: 30vh;
        display: flex;
        justify-content: flex-start;
    }
    .skills1-content>.box>h1{
        width: 100%;
        font-size: 35px;
        
    }
    .skills1-content>.box>h2{
        width: 100%;
    }
    .skills1-content>.box>p{
        font-size: 15px;
    }
    /* mywordcotent */
    .myworkcontent>.content{
        width: 96vw;
        
      
        
    }
    .myworkcontent>.content>.item{
      
        width: 48vw;
        height:48vw ;
        
    
    }
    .myworkcontent>.content>.item>.item-opa{
      
        margin: 0px;
   
        
    }
    .myworkcontent>.content>.item:active>.item-opa{
        background-color: rgb(255, 255, 255);
        transform: scale(1);
        transition: 1s ease ;
        opacity: 0.8;
    }
    .myworkcontent>.content>.item:focus>.item-opa{
        background-color: rgb(255, 255, 255);
        transform: scale(1);
        transition: 1s ease ;
        opacity: 0.8;
    }
    .mywork-modal-content{
        position: absolute;
        width: 90%;
        height: auto;
        
        
    }
      /* education */
      .education-content-box{
        
        margin: 0px 0px;
    
    }
    .education-content{
        width: 100%;

    
    }
    
    
/* hire */
.hire{
    
    display: flex   ;
  

}
.hire-content{
    width: 86vw;
    margin: 0px;
    flex-direction: column ;
    
  
}
.hire-content>.hire-content-word>h3{
    font-size: 25px;
  
}
.hire-content>button{
    margin-top: 20px;

}
.hire-content>.hire-content-word>p{
    margin: 5px 0px;
    font-size: 15px;
    color: #22252c;
}
/* contact */
.contact-container{
    width: 100%;
    padding: 0px;
    margin: 20px 0px;
    
    
}

.contact-name{

    padding: 20px 12px;  
  

}
.contact-name>input{
    width: 100%;
}
.contact-email{

    padding: 20px 12px;     

        
    
}
    /* footer */
    .footer-icon{
        width: 50vw;
      
        margin: 20px 0px 50px 0px;
        
    
        
        
    }
}