*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    overflow-x: hidden;
    background-repeat: no-repeat;
    background: #0c0c0c;
    overflow-y: auto;
}
.CV_new{
    display: none;
}
.span-1{
    color: white !important;
    display: block;
    position: absolute;
    top: 0.2vh !important;
    left: 50px;
}
.span-1{
    font-size: 18px !important;
    position: absolute;
    top: 1px;
}
.name-1{
    display: none;
}
.down-arrow{
    display: none;
}
input{
    display: none;
}
.h1{
    position: absolute;
    top: 13vh;
    z-index: -1;
}
navbar{
    width: 100%;
    height: 13vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    position: fixed;
    z-index: 1;
    background: #0c0c0c;
}
navbar a{
    text-decoration: none;
    color: white;
    
}
nav{
    margin-right: 4%;
}

/* label{
    position: relative;
    display: block;
    border-radius: 200px;
    width: 30px;
    height: 20px;
    box-shadow: inset 0px 5px 15px rgba(0, 0, 0, 0.4), inset 0px --5px 15px rgba(255, 255, 255, 0.4);
    cursor: pointer;
}
label::after{
    content: "";
    width: 180px;
    height: 180px;
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(180deg, #ffcc89, #d8860b);
    border-radius: 180px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
} */

/* .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #4bffa5;
    opacity: 20%;
    position: absolute;
    transition: transform 0.05s ease;
    transform: translate(-50%, -50%);
    will-change: transform;
} */
#icon{
    width: 30px;
    cursor: pointer;
}
nav{
    width: auto;
    height: auto;
    position: fixed;
    left: 1213px;
    width: 100%;
    top: 3vh;
}
ul{
    overflow: hidden;
}
ul li{
    display: inline-block;
    margin: 20px;

}
ul li a{
    text-decoration: none;
    color: white;
}
.home:hover{
    content: 'Home';
}
/* .home::after {
    content: '▼';
    margin-left: 6px;
    font-size: 10px;
} */
/* .dropdown{
    display: none;
    position: absolute;
    z-index: 1;
    background: #1d1d1d;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    top: 12vh;
    right: 34%;
}
.dropdown li{
    display: list-item;
    list-style-type: none;
    box-sizing: border-box;
    height: 20px;
    width: 100%;
    border-bottom: 1px solid black;
    position: relative;
    right: 12%;
    cursor: pointer;
    
}
.dropdown li a{
    position: relative;
    left: 15px;
} */
.text-containor span{
    color: #a4a7a9;
    font-size: 20px;
    margin-left: 9px;
}
.text-containor {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 20px;
    width: 150px;
    border:none;
    text-align: center;
}
.name, .name2 {
    position: absolute;
    left: 17px;
    right: 0;
    transition: transform 0.5s ease;
    top: 2px;
}
.name{
    transform: translateY(0);
    font-size: 18px;
    width: 20%;
    margin-left: 15px;
    top: 1px;
}

.name2 {
    transform: translateY(100%);
    font-size: 18px;
    left: 16px !important;
}
.text-containor:hover .name {
    transform: translateY(-100%);
}
.text-containor:hover .name2 {
    transform: translateY(0);
}
.Dropdown a::before {
    content: '';
    position: fixed;
    top: 7vh;
    right: 270px;
    width: 4px;
    height: 4px;
    background-color: #4bffa5;
    opacity: 20%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s ease;
    z-index: 2;
}
.Dropdown a:hover::before {
    transform: translate(50%, 50%) scale(20);
}
.Dropdown:hover .dropdown{
    display: block;
}
.Dropdown2 a::before {
    content: '';
    position: fixed;
    top: 7vh;
    right: 181px;
    width: 4px;
    height: 4px;
    background-color: #4bffa5;
    opacity: 20%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s ease;
    z-index: 2;
}
.Dropdown2 a:hover::before {
    transform: translate(50%, 50%) scale(20);
}
.Dropdown2:hover .dropdown-second{
    display: block;
}
.Dropdown2 a:visited{
    color: #4bffa5;
}
.Dropdown3 a::before {
    content: '';
    position: fixed;
    top: 7vh;
    right: 90px;
    width: 4px;
    height: 4px;
    background-color: #4bffa5;
    opacity: 20%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s ease;
    z-index: 2;
}
.Dropdown3 a:hover::before {
    transform: translate(50%, 50%) scale(20);
}
.Dropdown3:hover .dropdown-third{
    display: block;
}
#sentence{
    font-size: 24px;
    text-align: center;
    color: white;
    position: relative;
    top: 60vh;
}
h1{
    color: white;
    position: absolute;
    left: 45%;
    top: 8vh;
    font-size: 45px;
}
.personal{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 25vh;
    box-sizing: border-box;
    border: 1px solid #252525;
    height: 45vh;
    width:58%;
    position: absolute;
    left: 20%;
}
.personal img{
    height: 29vh;
    position: relative;
    top: 1vh;
}
.content{
    height: auto;
    width: auto;
    text-align: justify;
    position: relative;
    bottom: 64px;
    left: 20px;
}
.content p{
    color: #a4aeb5;
    font-size: 17px;
}
.personal_det{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 44vh;
    left: 512px;
    margin-left: 10px;
}
.mail{
    display: none;
}
span{
    color: #2fe19b;
    font-size: 17px;
    position: relative;
    right: 10px;
}
.personal_det1 p{
    color: #a4aeb5;
    font-size: 17px;
    position: relative;
    left: 19px;
}
.personal_det1 span{
    color: #2fe19b;
    position: relative;
}
.personal_det2 p{
    color: #a4aeb5;
    font-size: 17px;
    position: relative;
    left: 37%;
}
.personal_det2 span{
    color: #2fe19b;
    position: relative;
}
button{
    cursor: pointer;
    padding: 15px 40px;
    color: #2fe19b;
    background: transparent;
    border: 1px solid #2fe19b;
}
.button {
    position: absolute;
    top: 56vh;
    left: 524px;
    margin-left: 5px;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
}
/* .button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: #2fe19b;
    transition: all 1s ease;
    transform: translate(-50%, -50%) scale(0);
    opacity: 40%;
}

.button:hover::before {
    transform: translate(-50%, -50%) scale(1);
} */
.button:hover{
    color: black;
    background: #4bffa5;
    transition: 1s;
}
.button span {
    position: relative;
}
.skills{
    width: 100%;
    height: 186vh;
}
.skills h2{
    color: white;
    position: absolute;
    top: 75vh;
    left: 23%;
}
.skill1{
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skill1 i{
    color: #2fe19b;
}
.skill1 p{
    color: white;
}
.html{
    box-sizing: border-box;
    position: absolute;
    top: 86vh;
    right: 52%;
    height: 27vh;
    width: 30%;
    border: 1px solid #252525;
}
.html i{
    font-size: 52px;
    position: absolute;
    left: 45%;
    top: 2vh;
}
.html p{
    position: relative;
    top: 11vh;
    font-size: 22px;
    text-align: center;
}
.html span{
    color: #a4aeb5;
    position: absolute;
    left: 5%;
    top: 17vh;
    text-align: center;
}
.css{
    box-sizing: border-box;
    position: absolute;
    top: 86vh;
    right: 19%;
    height: 27vh;
    width: 30%;
    border: 1px solid #252525;
}
.css i{
    font-size: 52px;
    position: absolute;
    left: 45%;
    top: 2vh;
}
.css p{
    position: relative;
    top: 11vh;
    font-size: 22px;
    text-align: center;
}
.css span{
    color: #a4aeb5;
    position: absolute;
    left: 5%;
    top: 17vh;
    text-align: center;
}
.skill2{
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skill2 i{
    color: #2fe19b;
}
.skill2 p{
    color: white;
}
.js{
    box-sizing: border-box;
    position: absolute;
    top: 123vh;
    right: 52%;
    height: 27vh;
    width: 30%;
    border: 1px solid #252525;
}
.js i{
    font-size: 52px;
    position: absolute;
    left: 45%;
    top: 2vh;
}
.js p{
    position: relative;
    top: 11vh;
    font-size: 22px;
    text-align: center;
}
.js span{
    color: #a4aeb5;
    position: absolute;
    left: 5%;
    top: 17vh;
    text-align: center;
}
.bs{
    box-sizing: border-box;
    position: absolute;
    top: 123vh;
    right: 19%;
    height: 27vh;
    width: 30%;
    border: 1px solid #252525;
}
.bs i{
    font-size: 52px;
    position: absolute;
    left: 45%;
    top: 2vh;
}
.bs p{
    position: relative;
    top: 11vh;
    font-size: 22px;
    text-align: center;
}
.bs span{
    color: #a4aeb5;
    position: absolute;
    left: 5%;
    top: 17vh;
    text-align: center;
}
.skill3{
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skill3 i{
    color: #2fe19b;
}
.skill3 p{
    color: white;
}
.php{
    box-sizing: border-box;
    position: absolute;
    top: 160vh;
    right: 52%;
    height: 27vh;
    width: 30%;
    border: 1px solid #252525;
}
.php i{
    font-size: 52px;
    position: absolute;
    left: 43%;
    top: 2vh;
}
.php p{
    position: relative;
    top: 11vh;
    font-size: 22px;
    text-align: center;
}
.php span{
    color: #a4aeb5;
    position: absolute;
    left: 5%;
    top: 17vh;
    text-align: center;
}
.lara{
    box-sizing: border-box;
    position: absolute;
    top: 160vh;
    right: 19%;
    height: 27vh;
    width: 30%;
    border: 1px solid #252525;
}
.lara i{
    font-size: 52px;
    position: absolute;
    left: 45%;
    top: 2vh;
}
.lara p{
    position: relative;
    top: 11vh;
    font-size: 22px;
    text-align: center;
}
.lara span{
    color: #a4aeb5;
    position: absolute;
    left: 5%;
    top: 17vh;
    text-align: center;
}
.extra{
    height: 10vh;
    width: 100%;
    margin-top: 10vh;
}
@media (max-width:768px) and (max-width: 1024px){
    .personal{
        position: absolute;
        top: 98vh;
        width: 94%;
        left: 4%;
        height: 96vh;
    }

    .image img{
        height: 21vh;
        position: absolute;
        top: 35px;
        left: 31%;
    }
    .content{
        position: absolute;
        top: 30vh;
        text-align: center;
        width: 86%;
        left: 8%;
        font-size: 30px;
    }
    .content p{
        line-height: 28px;
    }
    .content br{
        display: none;
    }
    .personal_det{
        position: absolute;
        top: 155vh;
        left: 0;
        line-height: 28px;
        width: 90%;
    }
    .personal_det1{
        text-align: center;
        position: absolute;
    }
    .personal_det2{
        position: relative;
        top: 90px;
        left: -30%;
        text-align: center;
        width: 350px;
    }
    .personal_det2 p{
        font-size: 17px;
    }
    .personal_det2 span{
        font-size: 17px;
    }
    .button{
        position: absolute;
        top: 182vh;
        left: 30%;
        font-weight: 600;
        margin-left: 0;
        display: none;
    }
    .button:hover{
        color: black;
        background: #4bffa5;
        transition: 1s;
    }
    .h1{
        position: absolute;
        top: 38vh;
        left: 27%;
    }
    .down-arrow{
        display: block;
    }
    .down-arrow i{
        color: #2fe19b;
        position: absolute;
        top: 80vh;
        z-index: -1;
        left: 45%;
        font-size: 30px;
        animation: up-down 1s ease-in-out infinite;
    }
    .down-arrow {
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    .down-arrow.hidden {
        opacity: 0;
        pointer-events: none;
    }

    @keyframes up-down{
        0%{
            transform: translateY(0);
        }
        50%{
            transform: translateY(15px);
        }
        100%{
            transform: translateY(0);
        }
    }
    .text-containor{
        position: fixed !important;
        top: 7vh;
        left: 2%;
        z-index: 1;
        overflow-x: hidden;
        max-width: 100%;
    }
    .text-containor a{
        font-size: 17px;
        position: absolute;
        left: 15%;
    }
    .span_change{
        font-size: 18px !important;
        position: fixed;
        left: -70%;
    }
    .name{
        position: absolute;
        left: 50%;
    }
    .span-1{
        display: none;
    }
    .name2{
        display: none;
    }
    .name-1{
        display: block;
        position: absolute !important;
        left: 50% !important;
        top: -0.1vh;
    }
    .span_change2{
        font-size: 17px !important;
        color: white !important;
        position: absolute !important;
        top: 2px !important;
        left: 3px !important;
    }
    .containor{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 30vh !important;
        background: #0c0c0c;
        z-index: -1;
        width: 100%;
        position: fixed;
    }
    input{
        display: none;
    }
    label{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 50px;
        height: 50px;
        background: transparent;
        position: fixed;
        transition: 1s;
        left: 80%;
        top: 5vh;
        max-width: 100%;
        overflow-x: hidden;
    }

    label span{
        background-color: white;
        width: 30px;
        height: 5px;
        position: relative;
        border-radius: 5px;
        left: 2%;
    }
    label span:nth-child(2){
        margin-top: 6px;
    }
    label span:nth-child(3){
        margin-top: 6px;
        transition: 1s;
    }
    input:checked ~ label span:nth-child(1){
        transform: rotate(45deg);
        position: relative;
        top: 6px;
        transition: 1s;
    }
    input:checked ~ label span:nth-child(2){
        transform: rotate(-45deg);
        position: relative;
        bottom: 5px;
        transition: 1s;
    }
    input:checked ~ label span:nth-child(3){
        display: none;
        
    }
    navbar{
        width: auto;
        height: auto;
    }
    .nav{
        background: #0c0c0c;
        position: fixed;
        top: 0;
        width: 60%;
        left: 0;
        height: 100vh;
        z-index: 1000;
        overflow-y: hidden;
        max-width: 100%;
        transform: translateX(-106%);
    }
    @keyframes open{
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0);
        }
    }
    .nav.show{
        animation: open 1s ease-in-out forwards;
    }
    @keyframes close{
        from{
            transform: translateX(0);
        }
        to{
            transform: translateX(-100%);
        }
    }
    .nav.notshow{
        animation: close 1s ease-in-out;
    }

    .menu{
        position: relative;
        top: 20vh;
        left: 0;
        z-index: 1;
    }
    .Dropdown{
        background: transparent;
        width: 87%;
        position: relative;
        height: 5vh;
        left: -1%;
        top: 4vh;
        text-align: center;
        border-bottom: 1px solid white;
    }
    .Dropdown a{
        text-decoration: none;
        opacity: 100%;
        color: gray;
        position: relative;
        top: 8px;
    }
        .Dropdown2{
        background: transparent;
        width: 87%;
        position: relative;
        height: 5vh;
        left: -2%;
        margin-top: 10vh;
        text-align: center;
        border-bottom: 1px solid white;
    }
    .Dropdown2 a{
        text-decoration: none;
        opacity: 100%;
        color: gray;
        position: relative;
        top: 8px;
    }
    .Dropdown3{
        background: transparent;
        width: 92%;
        position: relative;
        height: 5vh;
        left: -4%;
        margin-top: 6vh;
        text-align: center;
        border-bottom: 1px solid white;
    }

    .Dropdown3 a{
        text-decoration: none;
        opacity: 100%;
        color: gray;
        position: relative;
        top: 8px;
        font-weight: 500;
    }
    .sidebar{
        display: none !important;
    }
    .skills{
        position: absolute;
        top: 140vh;
        left: -13%;
        width: 100%;
        
    }
    .skills h2{
        margin-left: 0;
        position: absolute;
        left: 20%;
        top: 78vh;
    }
    .skill1{
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .html{
        width: 92%;
        position: absolute;
        top: 90vh;
        left: 17%;
        height: 34vh;
        line-height: 28px;
    }
    .css{
        width: 92%;
        position: absolute;
        top: 130vh;
        left: 17%;
        height: 34vh;
        line-height: 28px;
    }
    .skill2{
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .js{
        width: 92%;
        position: absolute;
        top: 170vh;
        left: 17%;
        height: 34vh;
        line-height: 28px;
    }
    .bs{
        width: 92%;
        position: absolute;
        top: 210vh;
        left: 17%;
        height: 34vh;
        line-height: 28px;
    }
    .skill3{
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .php{
        width: 92%;
        position: absolute;
        top: 250vh;
        left: 17%;
        height: 34vh;
        line-height: 28px;
    }
    .lara{
        width: 92%;
        position: absolute;
        top: 290vh;
        left: 17%;
        height: 34vh;
        line-height: 28px;
    }
    .html i{
        font-size: 52px;
        position: absolute;
        left: 40% !important;
        top: 2vh;
    }
    .css i{
        font-size: 52px;
        position: absolute;
        left: 40% !important;
        top: 2vh;
    }
    .js i{
        font-size: 52px;
        position: absolute;
        left: 40% !important;
        top: 2vh;
    }
    .bs i{
        font-size: 52px;
        position: absolute;
        left: 40% !important;
        top: 2vh;
    }
    .php i{
        font-size: 52px;
        position: absolute;
        left: 40% !important;
        top: 2vh;
    }
    .lara i{
        font-size: 52px;
        position: absolute;
        left: 40% !important;
        top: 2vh;
    }
    .Dropdown a::before{
        display: none;
    }
    .Dropdown2 a::before{
        display: none;
    }
    .Dropdown3 a::before{
        display: none;
    }
    .Dropdown3:hover .dropdown-third{
        display: none;
    }
    .mail{
        display: block;
        position: absolute;
        top: 335vh;
        left: 14%;
        text-align: center;
        width: 98%;
    }
    .mail p{
        color: #a4aeb5;
        font-size: 15px;
    }
    .projects h2{
        margin-left: 0.5%;
        margin-top: 2vh;
    }
    .sidebar{
        display: block !important;
        position: absolute !important;
        top:460vh !important;
        height: 29vh !important;
    }
    .social{
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        right: 105% !important;
    }
    .social i{
        color: #a4aeb5 !important;
    }
    .in{
        top: 10vh !important;
        left: -120%;
    }
    .git{
        top: 10vh !important;
        left: -70%;
    }
    .insta{
        top: 10vh !important;
        left: -4%;
    }
    .face{
        top: 10vh !important;
        left: 60%;
    }
    .CV_new{
        display: block;

    }
    .button2{
        border: 1px solid #2fe19b;
        height: 6vh;
        padding-top: 2vh;
        width: 47%;
        text-align: center;
        color: #2fe19b;
        cursor: pointer;
        position: absolute;
        top: 42vh;
        left: 40%;
        font-weight: 600;
        margin-left: 0;
        z-index: -1;
    }
}
@media screen and (max-width: 900px) and (orientation: landscape) {
    .button{
        display: none;
    }
    .content-hero{
        display: none;
    }
    .containor{
        height: 45vh !important;
    }
    .typing-container{
        display: none;
    }
    .name2{
        display: none;
    }
    .text-containor{
        width: 175px !important;
        margin-top: 4vh !important;
    }
    .name{
        font-weight: 600;
        z-index: 1;
    }
    .label1{
        top: 8vh;
        left: 86% !important;
    }
    .Dropdown{
        top: -3vh !important;
        width: 100%;
        left: -4% !important;
    }
    .Dropdown2{
        margin-top: 5vh !important;
        width: 100%;
        left: -4% !important;
    }
    .Dropdown3{
        margin-top: 9vh;
        width: 100%;
        left: -4% !important;
    }
    .Dropdown a{
        top: -2px !important;
    }
    .Dropdown2 a{
        top: -2px !important;
        left: 1%;
    }
    .Dropdown3 a{
        top: -2px !important;
    }
    .sidebar{
        position: absolute;
        top: 20vh !important;
        left: 88.5% !important;
    }
    .git{
        top: 13vh !important;
    }
    .insta{
        top: 19vh !important;
    }
    .face{
        top: 25vh !important;
    }
    .h1{
        left: 40%;
    }
    .down-arrow i{
        left: 80%;
        top: 70vh;
    }
    .image img{
        height: 45vh;
        position: absolute;
        top: 35px;
        left: 6%;
    }
    .content{
        position: absolute;
        top: 35px;
        text-align: left;
        width: 71%;
        left: 30%;
        font-size: 20px;
    }
    .personal_det{
        left: 5.3%;
        top: 143vh;
        width: 70%;
    }
    .personal_det1{
        text-align: left;
        width: 30%;
    }
    .personal_det1 p{
        font-size: 14px;
    }
    .personal_det1 span{
        font-size: 14px;
    }
    .personal_det2{
        text-align: left;
        left: 30%;
        top: -1px;
        width: 50%;
    }
    .personal_det2 p{
        font-size: 14px;
    }
    .personal_det2 span{
        font-size: 14px;
    }
    .anchor{
        position: absolute;
        width: 80%;
        left: 8.2%;
        top: -9vh;
    }
    .skills{
        width: 100%;
        margin-top: 10vh;
    }
    .skills h2{
        margin-left: -1.5%;
    }
    .skill1{
        width: 100%;
        flex-basis: 50%;
        margin-top: 7vh;
    }
    .html{
        width: 45%;
        position: relative;
        left: -9%;
        height: 60vh;
    }
    .html i{
        font-size: 35px;
        margin-top: 4px;
        margin-left: 3%;
    }
    .html p{
        margin-top: 4vh;
    }
    .html span{
        margin-top: 8vh;
        font-size: 16px;
    }
    .css{
        width: 45%;
        position: relative;
        left: 37.5%;
        top: 30vh;
        height: 60vh;
    }
    .css i{
        font-size: 35px;
        margin-top: 4px;
        margin-left: 3%;
    }
    .css p{
        margin-top: 4vh;
    }
    .css span{
        margin-top: 8vh;
        font-size: 16px;
    }
    .skill2{
        width: 100%;
        flex-basis: 50%;
        margin-top: 7vh;
    }
    .js{
        width: 45%;
        position: relative;
        left: -9%;
        height: 60vh;
        top: 38vh;
    }
    .js i{
        font-size: 35px;
        margin-top: 4px;
        margin-left: 3%;
    }
    .js p{
        margin-top: 4vh;
    }
    .js span{
        margin-top: 8vh;
        font-size: 16px;
    }
    .bs{
        width: 45%;
        position: relative;
        left: 37.5%;
        height: 60vh;
        top: -21.9vh;
    }
    .bs i{
        font-size: 35px;
        margin-top: 4px;
        margin-left: 3%;
    }
    .bs p{
        margin-top: 4vh;
    }
    .bs span{
        margin-top: 8vh;
        font-size: 16px;
    }
    .skill3{
        width: 100%;
        flex-basis: 50%;
        margin-top: 7vh;
    }
    .php{
        width: 45%;
        left: 18.5%;
        height: 60vh;
        top: 247vh;
    }
    .php i{
        font-size: 35px;
        margin-top: 4px;
        margin-left: 3%;
    }
    .php p{
        margin-top: 4vh;
    }
    .php span{
        margin-top: 8vh;
        font-size: 16px;
    }
    .lara{
        width: 45%;
        left: 65%;
        height: 60vh;
        top: 247vh;
    }
    .lara i{
        font-size: 35px;
        margin-top: 4px;
        margin-left: 3%;
    }
    .lara p{
        margin-top: 4vh;
    }
    .lara span{
        margin-top: 8vh;
        font-size: 16px;
    }
    .align{
        display: none !important;
    }
    .line{
        display: none !important;
    }
    .sidebar{
        display: block !important;
        position: absolute !important;
        top:470vh !important;
        height: 40vh !important;
        width: 8% !important;
        left: 55% !important;
    }
    .social{
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        width: 10%;
    }
    .social i{
        color: #a4aeb5 !important;
    }
    .in{
        top: 10vh !important;
        left: -140%;
    }
    .git{
        top: 10vh !important;
        left: -70%;
    }
    .insta{
        top: 10vh !important;
        left: 18%;
    }
    .face{
        top: 10vh !important;
        left: 100%;
    }
    .mail{
        display: block;
        position: absolute;
        top: 325vh;
        left: 20%;
        width: 90%;
        text-align: center;
    }
    .mail p{
        color: #a4aeb5;
    }
    .name-1{
        left: 47% !important;
        top: -0.2vh;
    }
    .button2{
        border: 1px solid #2fe19b;
        height: 12vh;
        padding-top: 3vh;
        width: 26%;
        text-align: center;
        color: #2fe19b;
        cursor: pointer;
        position: absolute;
        top: 28vh;
        left: 45.3%;
        font-weight: 600;
        margin-left: 0;
        z-index: -1;
    }
}