@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+CO:wght@100..400&family=Playwrite+FR+Moderne:wght@100..400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
:root{
    --slider-colo:var(--hilight-col);
    --white-black:var(--search-bar);
    --final-color:rgb(87, 88, 91);
    --hilight-col:#256fc9;
    --light-name:#202323;
    --light-text:#010718;
    --light-pragraph:rgb(88, 90, 95);
    --light-heading:rgb(87, 103, 144);
    --body-color:#E4E9F7;
    --nav-color:#256fc9;
    --side-nav:#010718;
    --text-color:#fff;
    --search-bar:#f2f2f2;
    --search-text:#010718;
}
body.dark{
    --slider-colo:  var( --final-color);
    --white-black:var(--side-nav);
    --final-color:rgb(205, 209, 245);
    --hilight-col:rgb(103, 132, 203);
    --light-name:#dde3f7;
    --light-text:#f2f2f2;
    --light-pragraph:rgb(171, 180, 202);
    --light-heading:rgb(103, 132, 203);
    --body-color:#18191A;
    --nav-color:#242526;
    --side-nav:#242526;
    --text-color:#ccc;
    --search-bar:#242526;

}
body{
    height: 100vh;
    background-color: var(--body-color);
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
}
nav{
    position: fixed;
    top: 0;
    left: 0;
    height: 70px;
    width: 100%;
    background-color: var(--nav-color);
    z-index: 100;
}
nav .nav-bar{
    position: relative;
    height: 100%;
    max-width: 1000px;
    width: 100%;
    background-color: var(--nav-color);
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between  ;
}
nav .nav-bar .slidebarOpen{
    color: var(--text-color);
    font-size: 25px;
    padding: 5px;
    cursor: pointer;
    display: none;
}


nav .nav-bar .logo a{
    font-size: 25px;
    text-decoration: none;
    font-weight: 500;
    color: var(--text-color);
}

.menu .logo-toggle{
        display: none;

    }
/* nav .nav-bar .logo a::before{
    content: '';
    position: absolute;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: var(--text-color);
} */

.nav-bar .nav-links{
    display: flex;
    align-items: center;
}
.nav-bar .nav-links li{
    margin: 0 5px;
list-style: none;
}
.nav-links li a{
    position: relative;
text-decoration: none;
font-size: 17px;
font-weight: 500;
color: var(--text-color);
padding: 10px;
}
.nav-bar .darkLight-searchBox{
    display: flex;
    align-items: center;
}
.darkLight-searchBox .dark-light,
.darkLight-searchBox .searchToggle
{
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}
.dark-light i,
.searchToggle i{
    position: absolute;
    color: var(--text-color);
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.dark-light i.sun{
    opacity: 0;
    pointer-events: none;
}
.dark-light.active i.sun{
    opacity: 1;
    pointer-events: auto;
}
.dark-light.active i.moon{
    opacity: 0;
    pointer-events: none;
}
.searchToggle i.cancel{
    opacity: 0;
    pointer-events: none;
}
.searchToggle.active i.cancel{
    opacity: 1;
    pointer-events: auto;
}
.searchToggle.active i.search{
    opacity: 0;
    pointer-events: none;
}
.seachBox{
    position: relative;
}
.seachBox .search-field{
    position: absolute;
    bottom: -85px;
    right: 5px;
    height: 50px;
    width: 300px;
    background-color: var(--nav-color);
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    box-shadow: 0 5px 5px rgba(0, 0, 0.1),;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.searchToggle.active ~ .search-field{
    bottom: -74px;
    opacity: 1;
    pointer-events: auto;
}
.search-field::before{
    content: '';
    position: absolute;
    right: 14px;
    top: -4px;
    height: 12px;
    width: 12px;
    background-color: var(--nav-color);
    transform: rotate(-45deg);
    z-index: -1;
}
.search-field input{
    height: 100%;
    width: 100%;
    padding: 0 45px 0 15px;
    outline: none;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    color: var(--search-text);
    background-color: var(--search-bar);

}
body.dark .search-field input{
    color: var(--text-color);
}
.search-field i{
    position: absolute;
    right: 15px;
    font-size: 22px;
    cursor: pointer;
    color: var(--final-color);
}

@media (max-width:770px) {
    nav .nav-bar .slidebarOpen{
    
        display: block;
    }
    .menu{
        position: fixed;
        height: 100%;
        width: 280px;
        left: -100%;
        top: 0;
        padding: 20px;
        background-color: var(--side-nav);
        z-index: 100;
        transition:  all 0.3s ease;
    }
    nav.active .menu{
        left: -0%;
    }
    .menu .logo-toggle{
        display: block;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

    }
    .logo-toggle .SliderClose{
        color: var(--text-color);
        font-size: 24px;
        cursor: pointer;
    }
    .nav-bar .nav-links{
        flex-direction: column;
        padding-top: 60px;
    }
    .nav-links li a{
        display: block;
        margin: 20px;

    }
}

.container{
    max-width: 1170px;
    margin:auto;
}
.row{
    display: flex;
    flex-wrap: wrap;
}
ul{
    list-style: none;
}
.footer{
    background-color: var(--nav-color);
    padding: 70px 0;
}
.footer-col{
width: 25%;
padding: 0 15px;
}
.footer-col h4{
    font-size: 18px;
    color:#fff;
    text-transform: capitalize;
    margin-bottom: 35px;
    font-weight: 500;
    position: relative;
}
.footer-col h4::before{
    content: '';
    position: absolute;
    left:0;
    bottom: -10px;
    background-color: #e91e63;
    height: 2px;
    box-sizing: border-box;
    width: 50px;
}
.footer-col ul li:not(:last-child){
    margin-bottom: 10px;
}
.footer-col ul li a{
    font-size: 16px;
    text-transform: capitalize;
    color: #ffffff;
    text-decoration: none;
    font-weight: 300;
    color: #bbbbbb;
    display: block;
    transition: all 0.3s ease;
}
.footer-col ul li a:hover{
    color: #ffffff;
    padding-left: 8px;
}
.footer-col .social-links a{
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: rgba(255,255,255,0.2);
    margin:0 10px 10px 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
    color: #24262b;
    background-color: #ffffff;
}

/*responsive*/
@media(max-width: 767px){
.footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
.footer-col{
    width: 100%;
}
}
.content{
padding: 0 40px;
width: 100%;
margin-top: 40px;

}
.Portfolio{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}
.bio{
 
    height:70%;
    width: 700vh;
}
.bio h4 {
    text-align: center;
    font-size: 4rem;
}
.images img{
   border-radius: 50%;
   height: 300px;
   border: 6px solid var(--hilight-col);
   background-color: var(--nav-color);
}
.bio h1{

display:flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-family: "Playwrite", cursive;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: var( --light-text);
}
.Secrch-content{
font-size: 3rem;
color: var(--hilight-col);
margin-left:20px ;
font-weight: 400;
font-style: normal;
}
.bio h4{
padding-left: 100px;
text-align: center;
font-size: 2.5rem;
font-family: "Ubuntu", sans-serif;
font-optical-sizing: auto;
font-weight:409;
font-style: normal;
color:var(--hilight-col);
}
.bio .name{
padding-top:30px;
font-family: "Ubuntu", sans-serif;
font-optical-sizing: auto;
font-weight:409;
font-style: normal;
margin-left: 10px;
font-size: 4rem;
letter-spacing: 0.8px;
color: var(--hilight-col);

}
.bio p{
font-family: "Ubuntu", sans-serif;
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
unicode-bidi: isolate;  
padding-left: 30px;
font-size: 1rem;
color: var( --light-pragraph);
margin-left:30px ;
}
@media(max-width: 951px){
.bio h4{
    
    text-align: center;
    font-size: 1.5rem;
}
.bio h1{
    font-size: 1.5rem;
    
}
.bio p{
    font-size: 0.9rem;    
}
.bio .name{
    font-size: 3rem;
  
}

}

.edu-details strong{
    color: var(--final-color);
    font-size: 0.8rem;
    justify-content: center;
    align-items: center;
}
.edu-details p{
    color:var(--light-text);
    font-family: "Ubuntu", sans-serif;
    font-size: 0.9rem;
    justify-content: center;
    align-items: center;
}
@media (min-width:890px){
  
    .divder{
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .skil-content{
        display:inline ;
        align-items: center;
        /* background-color: red; */
        justify-content: end;
        padding-left: 20px;
    }
    .edu-details strong{
        color: var(--final-color);
        font-size: 1.2rem;
       
        justify-content: center;
        align-items: center;
    }
    .edu-details p{
        color:var(--light-text);
        font-family: "Ubuntu", sans-serif;
        font-size: 1.3rem;
        justify-content: center;
        align-items: center;
    }
}
@media (max-width:770px){
    
.Portfolio{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
    }
    .Portfolio div{
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    .Secrch-content{
        display: inline;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .imgages{
        display: flex       ;
        justify-content: center;
        align-items: center;
    }

}
.skill_bar{
    overflow: hidden;
    width: 80vh;
    height: 25px;   
    position: relative;
    background: rgb(43, 43, 43);
    border-radius: 1000px;
    text-transform: uppercase;
    margin:10px auto;
    
}
.skill_area{
    font-size: 15px;
    z-index: 0;
   
    position: relative;
    margin-top: 5px;
    margin-left: 15px;
    text-shadow: none;
    color: var( --white-black)
}
.percentage{
    z-index: 7;
    position: relative;
    margin-right: 15px;
    /* margin-top: 15px; */
    float: right;
    text-shadow: none;
    color: var(--white-black);
}
#andro{
    width: 85%;
    animation: animate-andro 3s;
    height: 25px;
    position: relative;         
    border-radius: 1000px;
    background-color: var(--slider-colo);
}
#flutter{
    width: 80%;
    animation: animate-flutter 3s;
    height: 25px;
    position: relative;         
    border-radius: 1000px;
    background-color: var( --slider-colo);
}
#java{
    width: 80%;
    animation: animate-java 3s;
    height: 25px;
    position: relative;         
    border-radius: 1000px;
    background-color: var(--slider-colo);
}
#ccc{
    width: 65%;
    animation: animate-ccc 3s;
    height: 25px;
    position: relative;         
    border-radius: 1000px;
    background-color: var(--slider-colo);
}
#hcj{
    width: 75%;
    animation: animate-hcj 3s;
    height: 25px;
    position: relative;         
    border-radius: 1000px;
    background-color: var(--slider-colo);
}
#nodephp{
    width: 70%;
    animation: animate-nodephp 3s;
    height: 25px;
    position: relative;         
    border-radius: 1000px;
    background-color: var( --slider-colo);
}
#dbms{
    width: 80%;
    animation: animate-dbms 3s;
    height: 25px;
    position: relative;         
    border-radius: 1000px;
    background-color: var(--slider-colo);
}
/* //////////////////skill-animate////////////////// */
@keyframes animate-andro{
    from{width: 0px;}
    to{width: 85%;}
}
@keyframes animate-flutter{
    from{width: 0px;}
    to{width: 80%;}
}
@keyframes animate-java{
    from{width: 0px;}
    to{width: 80%;}
}
@keyframes animate-ccc{
    from{width: 0px;}
    to{width: 65%;}
}
@keyframes animate-hcj{
    from{width: 0px;}
    to{width: 75%;}
}
@keyframes animate-nodephp{
    from{width: 0px;}
    to{width: 70%;}
}
@keyframes animate-dbms{
    from{width: 0px;}
    to{width: 80%;}
}

@media (max-width:770px){
    .skill_bar{
        overflow: hidden;
        width: 40vh;
        height: 25px;   
        position: relative;
        background: rgb(43, 43, 43);
        border-radius: 1000px;
        text-transform: uppercase;
        margin:8px auto;
        
    }
}

@media (min-width:770px){
    .work-exper h3{
    
        margin:0 60px;  
    }
    .work-expert{
        margin:0 100px;  
    }
    .work-expert h4{
          font-size: 1.4rem;
          text-transform: uppercase;
          color: var(--final-color);
    }
    .work-expert p{  
        padding-left: 30px;
        margin-left:30px ;
        margin:5px 20px;
    }
}
.work-expert{
    margin:0 20px;  
    /* background-color: red;   */
}
.work-expert p{
    /* background-color: #e91e63; */
    font-family: "Ubuntu", sans-serif;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;  
    padding-left: 10px;
    font-size: 1rem;
    color: var( --light-pragraph);
}
.work-expert h5{
    margin:0 20px; 
    font-size: 0.9rem;   
    color: var(--final-color);
    text-transform: uppercase;
}
.work-expert h4{
    
    text-transform: uppercase;
    color: var(--final-color);
}

.hobby{
    /* height: 60vh;     */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* display: grid; */
}

.hobby div{
    height: 220px;
    width: 50%;
    padding: 10px 10px;
    margin: 10px 10px ;
    border-radius: 20px;
}
.hobby li{
    text-align: start;
    font-size: 30px;
    padding:  0 35px;
    color: var(--final-color);

}
.hobby strong{
    font-size: 20px;
    color: var(--final-color);
}
.hobby p{
    font-size: 20px;
    color: var(--final-color);
}
.family strong{
    font-size: 17px;
    color: var(--final-color);
}
.family p{
    font-size: 19px;
    color: var(--final-color);
}
@media (max-width:1247px){
    .hobby li{
        text-align: start;
        font-size: 20px;
        padding:  0 35px;
        color: var(--final-color);
    
    }
    .hobby strong{
        font-size: 15px;
        color: var(--final-color);
    }
    .hobby p{
        padding:  0 35px;
        font-size: 15px;
        color: var(--final-color);
    }
    .family strong{
        font-size: 13px;
        color: var(--final-color);
    }
    .family p{
        font-size: 15px;
        color: var(--final-color);
    }
}
@media (max-width:977px){
    .hobby{

        display: grid;
        justify-content: center;
    }
    .hobby  section{
        padding: 0 10px ;
    }
    .hobby div{
        height: 220px;
        width: 85%;
        margin-left: 10px;
       
        border-radius: 20px;

    }
    .hobby li{
        text-align: start;
        font-size: 23px;
        padding:  0 35px;
        color: var(--final-color);
    
    }
    .hobby strong{
        font-size: 18px;
        color: var(--final-color);
    }
    .hobby p{
        padding:  0 35px;
        font-size: 21px;
        color: var(--final-color);
    }
    .family strong{
        font-size: px;
        color: var(--final-color);
    }
    .family p{
        font-size: 15px;
        color: var(--final-color);
    }
}