*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family:"Archivo";
}
::selection{
    background-color:#986dff;
    color:#fff;
}
ul,ol{
    list-style:none;
    margin:0;
    padding:0;
}
a{
    text-decoration:none;
}
img{
    max-width:100%;
    height:auto;
    display:block
}
p,h1,h2,h3,h4,h5,h6{
    margin:0;
}
button,input{
    border:0;
    font-family:"Archivo";
}
button:focus,input:focus{
    border:0
}
body{
    font-family:"Archivo";
    background-color:#fff;
    overflow-x:hidden
}
html{
    scroll-behavior:smooth;
    font-size:62.5%
}
::-webkit-scrollbar{
    width:8px;
}
::-webkit-scrollbar-track{
    background-color:#111;
}
::-webkit-scrollbar-thumb{
    background-color:#986dff;
    border-radius:8px;
}
header{
    padding:0px 50px;
    background:#111;
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid #101013;
    z-index:999;
    width:100%;
    position:fixed;
    top:0;
    left:0;
}

@media screen and (max-width: 992px){
    header{
        padding:0px 24px;
    }
}
header .grid-layout nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    height:100px;
    padding:0px 8px;
}
header .grid-layout nav img{
    width:150px;
}
header .grid-layout nav .nav-list{
    list-style:none;
    display:flex;
}
header .grid-layout nav .nav-list li{
    margin-left:48px;
}

@media screen and (max-width: 992px){
    header .grid-layout nav .nav-list li{
        margin-left:0px;
    }
}
header .grid-layout nav .nav-list li a{
    color:#9ca3af;
    position:relative;
    font-size:1.8rem;
}
header .grid-layout nav .nav-list li a::after{
    content:"";
    position:absolute;
    width:100%;
    transform:scaleX(0);
    height:1px;
    bottom:-7px;
    left:0;
    background:linear-gradient(270deg, #986dff 0%, #17161d 100%);
    transform-origin:bottom right;
    transition:transform .5s cubic-bezier(0.86, 0, 0.07, 1);
}
header .grid-layout nav .nav-list li a:hover::after{
    transform:scaleX(1);
    transform-origin:bottom left;
}
header .grid-layout nav .nav-list li a:hover{
    color:#fff;
}
.mobile-menu{
    display:none;
}
.mobile-menu div{
    width:32px;
    height:1px;
    background-color:#fff;
    margin:8px;
    transition:.4s;
}
.nav-list.active{
    visibility:initial;
    transition:1s all ease;
}

@keyframes navLinkFade{
    from{
        opacity:0;
        transform:translateX(100px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}
.mobile-menu.active .line1{
    transform:rotate(-45deg) translate(-8px, 8px);
}
.mobile-menu.active .line2{
    opacity:0;
}
.mobile-menu.active .line3{
    transform:rotate(45deg) translate(-5px, -5px);
}

@media screen and (max-width: 992px){
    body{overflow-x:hidden;
    }
    .nav-list{
        text-align:center;
        position:absolute;
        top:100px;
        right:0;
        width:100vw;
        height:100vh;
        z-index:999;
        background-color:#151515;
        flex-direction:column;
        padding-top:96px;
        visibility:hidden;
    }
    header .grid-layout nav .nav-list li{
        opacity:0;
        margin-bottom:48px;
    }
    header .grid-layout nav .nav-list li a{
        font-size:2.4rem;
    }
    .mobile-menu{
        display:block;
    }
}
#s-home{
    padding:0px 50px;
    background-color:#111;
    position:relative;
}
@media screen and (max-width: 992px){
    #s-home{
        padding:100px 20px 0px 20px;
    }
}
#s-home .grid-layout #home{
    display:flex;
    align-items:center;
    min-height:90vh;
    padding:200px 0px;
    overflow:hidden;
    width:100%;
}
@media screen and (max-width: 992px){
    #s-home .grid-layout #home{
        padding:0px;
    }
}
#s-home .grid-layout #home #home-container-text{
    width:100%;
    flex-direction:column;
}
@media screen and (max-width: 992px){
    #s-home .grid-layout #home #home-container-text{
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        text-align:center;
        padding:0px;
    }
}
#s-home .grid-layout #home #home-container-text h1{
    color:#fff;
    max-width:650px;
    line-height:140%;
    font-size:4rem;font-weight:500;
}
@media screen and (max-width: 992px){
    #s-home .grid-layout #home #home-container-text h1{
        font-size:3.2rem;
    }
}
#s-home .grid-layout #home #home-container-text h1 span{
    color:#986dff;
}
#s-home .grid-layout #home #home-container-text p{
    color:#9ca3af;
    font-size:2rem;
    max-width:600px;
    margin:40px 0px;
    font-weight:300;
    line-height:160%;
}
#s-home .grid-layout #home #home-container-text a{
    background:#986dff;
    color:#fff;
    backdrop-filter:blur(10px);
    padding:20px 32px;
    max-width:250px;
    border-radius:4px;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:all .4s ease;
    margin-top:30px;
    font-size:18px;
    font-weight:400;
}
#s-home .grid-layout #home #home-container-text a:hover{
    padding:20px 45px;
    max-width:270px;
}
#s-home .grid-layout #home #logo{
    position:absolute;
    right:-50px;
    top:50%;
    transform:translate(0%, -50%);
}
@media screen and (max-width: 1200px){
    #s-home .grid-layout #home #logo{
        display:none;
    }
}
#s-about{
    padding:72px 0px;
    background-color:#111;
}
@media screen and (max-width: 1200px){
    #s-about{
        padding:72px 20px;
    }
}
#s-about .grid-layout>div{
    background-color:#151515;
    border:2px solid #1f1f1f;
    padding:24px;
    border-radius:4px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:auto;
}
@media screen and (max-width: 1200px){
    #s-about .grid-layout>div{
        flex-wrap:wrap;
        gap:32px;
    }
}
#s-about .grid-layout>div #creator-photo{
    width:47%;
    background-image:url("../image/anujphoto.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    border-radius:4px;
    height:500px
}
@media screen and (max-width: 1200px){
    #s-about .grid-layout>div #creator-photo{
        width:100%;
        height:400px;
    }
}
@media screen and (max-width: 992px){
    #s-about .grid-layout>div #creator-photo{
        height:350px;
    }
}
@media screen and (max-width: 768px){
    #s-about .grid-layout>div #creator-photo{
        height:300px;
    }
}
#s-about .grid-layout>div #creator-photo h3{
    color:#111;
    background-color:#fff;
    padding:8px;
    border-radius:16px;
    width:180px;
    text-align:center;
    font-size:1.4rem;
    font-weight:500;
    margin:16px;
}
#s-about .grid-layout>div div:nth-child(2){
    width:49%;
}
@media screen and (max-width: 1200px){
    #s-about .grid-layout>div div:nth-child(2){
        width:100%;
    }
}
#s-about .grid-layout>div div:nth-child(2) h2{
    font-size:4rem;
    font-weight:500;
    margin:16px 0px;
    color:#fff;
}
@media screen and (max-width: 992px){
    #s-about .grid-layout>div div:nth-child(2) h2{
        font-size:3.2rem;
    }
}
#s-about .grid-layout>div div:nth-child(2) h3{
    font-size:1.8rem;
    font-weight:300;
    margin-bottom:16px;
    color:#fff;
}
#s-about .grid-layout>div div:nth-child(2) h4{
    font-size:2rem;
    font-weight:500;
    color:#986dff;
}
#s-about .grid-layout>div div:nth-child(2) p{
    font-size:1.8rem;
    color:#9ca3af;
    line-height:160%;
    margin:32px 0px 48px 0px;
}
#s-about .grid-layout>div div:nth-child(2) nav ul{
    display:flex;
    align-items:center;
    gap:16px;
}
@media screen and (max-width: 1200px){
    #s-about .grid-layout>div div:nth-child(2) nav ul{
        flex-wrap:wrap
    }
}
#s-about .grid-layout>div div:nth-child(2) nav ul a{
    background-color:#111;
    border:2px solid #1f1f1f;
    border-radius:6px;
    padding:16px;
}
@media screen and (max-width: 1200px){
    #s-about .grid-layout>div div:nth-child(2) nav ul a img{
        width:40px;
    }
}
#s-about .grid-layout>div div:nth-child(2) nav ul a:hover{
    border-color:#986dff;
}
#s-experience{
    background-color:#151515;
    color:#fff;
    padding:96px 48px;
}
@media screen and (max-width: 992px){
    #s-experience{
        padding:48px 24px;
    }
}
#s-experience .grid-layout h2{
    padding-bottom:24px;
    color:#fff;
    font-size:4rem;
    font-weight:500;
}
#s-experience .grid-layout h2 span{
    color:#986dff;
}
#s-experience .grid-layout #experience{
    margin-top:32px;
    display:flex;
    gap:40px;
}
@media screen and (max-width: 1200px){
    #s-experience .grid-layout #experience{
        flex-wrap:wrap;
    }
}
#s-experience .grid-layout #experience .option-experience{
    display:flex;
    width:25%;
    flex-direction:column;
}
@media screen and (max-width: 1200px){
    #s-experience .grid-layout #experience .option-experience{
        width:100%;
    }
}
#s-experience .grid-layout #experience .option-experience .activeExperience{
    border-left:4px solid #986dff;
    color:#986dff;
}
#s-experience .grid-layout #experience .option-experience .activeExperience h3{
    font-weight:600;
}
#s-experience .grid-layout #experience .option-experience>div{
    padding:24px 32px;
    text-align:left;
    background-color:#111;
    border-left:4px solid #111;
}
#s-experience .grid-layout #experience .option-experience>div:hover{
    cursor:pointer;
}
#s-experience .grid-layout #experience .option-experience>div h3{
    font-size:1.8rem;
    font-weight:400;
}
#s-experience .grid-layout #experience .text-experience{
    width:75%;
}
@media screen and (max-width: 1200px){
    #s-experience .grid-layout #experience .text-experience{
        width:100%;
    }
}
#s-experience .grid-layout #experience .text-experience>div{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
@media screen and (max-width: 1200px){
    #s-experience .grid-layout #experience .text-experience>div{
        flex-wrap:wrap;
        gap:32px;
    }
}
#s-experience .grid-layout #experience .text-experience>div h4{
    font-size:2.4rem;
    font-weight:400;
}
#s-experience .grid-layout #experience .text-experience>div p{
    font-size:1.8rem;
    color:#9ca3af;
}
#s-experience .grid-layout #experience .text-experience h5{
    font-size:2rem;
    margin:32px 0px;
    font-weight:500;
    color:#986dff;
}
#s-experience .grid-layout #experience .text-experience p{
    font-size:2rem;
    line-height:160%;
    color:#9ca3af;
    font-weight:400;
}
#s-projects{
    padding:96px 48px;
    text-align:center;
    background-color:#111;
}
@media screen and (max-width: 992px){
    #s-projects{
        padding:48px 24px;
    }
}
#s-projects .grid-layout h2{
    padding-bottom:24px;
    color:#fff;
    font-size:4rem;
    font-weight:500
}
#s-projects .grid-layout h2 span{
    color:#986dff;
}
#s-projects .grid-layout #projects{
    margin:24px 0px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    text-align:left;
}
#s-projects .grid-layout #projects .teslabank{
    border:1px solid #e51d37;
}
#s-projects .grid-layout #projects .teslabank:hover{
    border:1px solid #e51d37
}
#s-projects .grid-layout #projects .naped
{
    border:1px solid #00a3ff
}
#s-projects .grid-layout #projects .naped:hover{
    border:1px solid #00a3ff;
}
#s-projects .grid-layout #projects .efront{
    border:1px solid #a6fb98;
}
#s-projects .grid-layout #projects .efront:hover{
    border:1px solid #a6fb98;
}
#s-projects .grid-layout #projects>article{
    background-color:#151515;
    height:auto;
    padding:32px;
    margin:8px;
    flex-basis:calc(33% - 20px);
    flex-grow:1;
    border:1px solid #111;
    transition:1s all ease;
    height:auto;
}
#s-projects .grid-layout #projects>article:hover{
    border:1px solid #986dff;
}
@media screen and (max-width: 1200px){
    #s-projects .grid-layout #projects>article{
        flex-basis:calc(50% - 20px);
    }
}
@media screen and (max-width: 768px){
    #s-projects .grid-layout #projects>article{
        flex-basis:calc(100% - 20px);
    }
}
#s-projects .grid-layout #projects>article h3{
    color:#fff;
    font-size:2.4rem;
    font-weight:500;
}
#s-projects .grid-layout #projects>article p{
    line-height:24px;
    margin:24px 0px;
    color:#9ca3af;
    line-height:3.2rem;
    font-size:1.8rem;
}
#s-projects .grid-layout #teslabank{
    color:#e51d37
}
#s-projects .grid-layout #teslabank::after{
    background:linear-gradient(270deg, #e51d37 0%, #17161d 100%);
}
#s-projects .grid-layout #naped{
    color:#00a3ff;
}
#s-projects .grid-layout #naped::after{
    background:linear-gradient(270deg, #00a3ff 0%, #17161d 100%);
}
#s-projects .grid-layout #efront{
    color:#a6fb98;
}
#s-projects .grid-layout #efront::after{
    background:linear-gradient(270deg, #a6fb98 0%, #17161d 100%);
}
#s-projects .grid-layout a{
    color:#986dff;
    position:relative;
    font-size:2rem;
    font-weight:400;
}
#s-projects .grid-layout a::after{
    content:"";
    position:absolute;
    width:100%;
    transform:scaleX(0);
    height:1px;
    bottom:-7px;
    left:0;
    background:linear-gradient(270deg, #986dff 0%, #17161d 100%);
    transform-origin:bottom right;
    transition:transform .5s cubic-bezier(0.86, 0, 0.07, 1);
}
#s-projects .grid-layout a:hover::after{
    transform:scaleX(1);
    transform-origin:bottom left;
}
#s-projects .grid-layout a::after{
    content:"";
    position:absolute;
    width:100%;
    transform:scaleX(0);
    height:1px;
    bottom:-7px;
    left:0;
    transform-origin:bottom right;
    transition:transform .5s cubic-bezier(0.86, 0, 0.07, 1);
}
#s-projects .grid-layout a:hover::after{
    transform:scaleX(1);
    transform-origin:bottom left;
}
#s-services{
    padding:96px 48px;
    background-color:#151515;
}
@media screen and (max-width: 992px){
    #s-services{
        padding:48px 24px;
    }
}
#s-services .grid-layout h2{
    text-align:center;
    padding-bottom:24px;
    color:#fff;
    font-size:4rem;
    font-weight:500;
}
#s-services .grid-layout h2 span{
    color:#986dff;
}
#s-services .grid-layout #services{
    display:flex;
    height:auto;
    flex-wrap:wrap;
    margin:24px 0px;
}
#s-services .grid-layout #services article{
    background-color:#111;
    height:auto;
    padding:32px;
    margin:8px;
    flex-basis:calc(33% - 20px);
    flex-grow:1;
    border:1px solid #111;
    transition:1s all ease;
    border:1px solid #1f1f1f;
    border-radius:4px;
}
#s-services .grid-layout #services article:hover{
    border:1px solid #986dff;
}
@media screen and (max-width: 1200px){
    #s-services .grid-layout #services article{
        flex-basis:calc(50% - 20px);
    }
}
@media screen and (max-width: 768px){
    #s-services .grid-layout #services article{
        flex-basis:calc(100% - 20px);
    }
}
#s-services .grid-layout #services article div{
    height:90px;
}
#s-services .grid-layout #services article div img{
    width:70px;
}
#s-services .grid-layout #services article h3{
    padding:24px 0px;
    color:#fff;
    font-size:2.4rem;
    font-weight:500;
}
#s-services .grid-layout #services article p{
    line-height:3.2rem;
    color:#9ca3af;
    font-size:1.8rem;
}
#s-skills{
    padding:96px 48px;
    background-color:#111;
}
@media screen and (max-width: 992px){
    #s-skills{
        padding:48px 24px;
    }
}
#s-skills .grid-layout #skills{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    height:auto;
    padding:8px;
}
#s-skills .grid-layout #skills div,#s-skills .grid-layout #skills article{
    width:50%;
}
@media screen and (max-width: 1200px){
    #s-skills .grid-layout #skills div,#s-skills .grid-layout #skills article{
        width:100%;
    }
}
#s-skills .grid-layout #skills #skills-text{
    min-height:400px;
}
@media screen and (max-width: 768px){
    #s-skills .grid-layout #skills #skills-text{
        min-height:auto;
    }
}
#s-skills .grid-layout #skills #skills-text h2{
    margin-bottom:32px;
    color:#fff;
    font-size:3.2rem;
    font-weight:500;
}
#s-skills .grid-layout #skills #skills-text h2 span{
    color:#986dff;
}
#s-skills .grid-layout #skills #skills-text .changeDescription{
    transition:2s all ease;
}
@media screen and (max-width: 768px){
    #s-skills .grid-layout #skills #skills-text .changeDescription{
        display:none;
    }
}
#s-skills .grid-layout #skills #skills-text p{
    max-width:500px;
    line-height:3.2rem;
    color:#9ca3af;
    font-size:1.8rem;
}
#s-skills .grid-layout #skills #skills-cards{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
}
@media screen and (max-width: 1200px){
    #s-skills .grid-layout #skills #skills-cards{
        margin-top:48px;
    }
}
#s-skills .grid-layout #skills #skills-cards article{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    justify-content:center;
    width:20%;
    flex-grow:1;
    height:130px;
    background-color:#151515;
    position:relative;
    border:1px solid #1f1f1f;
    border-radius:4px;
    transition:1s all ease
}
#s-skills .grid-layout #skills #skills-cards article:hover{
    border:1px solid #986dff
}
@media screen and (max-width: 768px){
    #s-skills .grid-layout #skills #skills-cards article{
        width:40%;
    }
}
footer{
    width:100%;
    height:auto;
    background-color:#151515;
    color:#fff;
    padding:24px 0px;
}
footer .grid-layout{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
}
footer p{
    font-size:1.8rem;
}
footer p a{
    font-weight:500;
    color:#986dff;
}
footer img{
    width:32px;
}
footer div{
    display:flex;
    align-items:center;
    gap:16px;
}
@media screen and (max-width: 1200px){
    footer .grid-layout{
        text-align:center;
        justify-content:center;
        flex-wrap:wrap;
        gap:48px;
    }
    footer .grid-layout div{
        display:none;
    }
}
.typewriter:after{
    content:"|";
    margin-left:8px;
    opacity:1;
    animation:blink 1s infinite;
    color:#986dff;
}
@keyframes blink{
    0%,100%{
        opacity:1;
    }
    50%{
        opacity:0;
    }
}
.grid-layout{
    max-width:1140px;
    margin:0 auto;
}

/*# sourceMappingURL=style.css.map */